html - SVG gradientUnits="userSpaceOnUse" 不适用于路径

Question

在下面的代码片段中，您将看到 2 个 SVG，一个带有圆圈，一个带有路径，两者都没有使用gradientUnits="userSpaceOnUse". 输出是您所期望的。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 96 96" width="120px">
    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
            <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
        </linearGradient>
    </defs>

    <g fill="url(#grad1)">
        <circle cx="24" cy="24" r="24"/>
        <circle cx="72" cy="24" r="24"/>
        <circle cx="72" cy="72" r="24"/>
        <circle cx="24" cy="72" r="24"/>
    </g>
</svg>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 96 96" width="120px">
    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
            <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
        </linearGradient>
    </defs>

    <g fill="url(#grad1)">
        <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2)" />
        <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2) translate(21, 0)" />
        <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2) translate(21, 21)" />
        <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2) translate(0, 21)" />
    </g>
</svg>

但是当gradientUnits="userSpaceOnUse"与上面的 SVG 一起使用时，带有圆圈的 SVG 表现出通常的行为，并且可以在整个过程中看到渐变，而带有路径的 SVG 则在其上显示为纯色，如下所示：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 96 96" width="120px">
    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
            <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
            <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
        </linearGradient>
    </defs>

    <g fill="url(#grad1)">
        <circle cx="24" cy="24" r="24"/>
        <circle cx="72" cy="24" r="24"/>
        <circle cx="72" cy="72" r="24"/>
        <circle cx="24" cy="72" r="24"/>
    </g>
</svg>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 96 96" width="120px">
    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
            <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
            <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
        </linearGradient>
    </defs>

    <g fill="url(#grad1)">
        <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2)" />
        <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2) translate(21, 0)" />
        <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2) translate(21, 21)" />
        <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2) translate(0, 21)" />
    </g>
</svg>

标签： htmlsvg

Answer 1

• 您正在转换 userSpaceOnUse 案例中的形状。渐变应用于未转换的路径，这些路径都位于页面顶部，因此是红色的。
• 您正在复制 id 值。那是无效的。

这是使渐变工作的一种方法。

1. 我已经删除了翻译并重建了不需要它们的路径。为了更简单地做到这一点，我使路径相对而不是绝对。
2. 我添加了一个 gradientTransform 来抵消路径缩放。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 96 96" width="120px">
    <defs>
        <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse" gradientTransform="scale(0.45)">
            <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
            <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
        </linearGradient>
    </defs>

    <g fill="url(#grad2)">
        <path d="M12,21.35l-1.45,-1.32c-5.15,-4.67,-8.55,-7.76,-8.55,-11.53c0,-3.09,2.42,-5.5,5.5,-5.5c1.74,0,3.41,0.81,4.5,2.08c1.09,-1.27,2.76,-2.08,4.5,-2.08c3.08,0,5.5,2.41,5.5,5.5c0,3.77,-3.4,6.86,-8.55,11.53l-1.45,1.32z"  transform="scale(2.2)"/>
        <path d="M33,21.35l-1.45,-1.32c-5.15,-4.67,-8.55,-7.76,-8.55,-11.53c0,-3.09,2.42,-5.5,5.5,-5.5c1.74,0,3.41,0.81,4.5,2.08c1.09,-1.27,2.76,-2.08,4.5,-2.08c3.08,0,5.5,2.41,5.5,5.5c0,3.77,-3.4,6.86,-8.55,11.53l-1.45,1.32z" transform="scale(2.2)"/>
        <path d="M33,42.35l-1.45,-1.32c-5.15,-4.67,-8.55,-7.76,-8.55,-11.53c0,-3.09,2.42,-5.5,5.5,-5.5c1.74,0,3.41,0.81,4.5,2.08c1.09,-1.27,2.76,-2.08,4.5,-2.08c3.08,0,5.5,2.41,5.5,5.5c0,3.77,-3.4,6.86,-8.55,11.53l-1.45,1.32z" transform="scale(2.2)"/>
        <path d="M12,42.35l-1.45,-1.32c-5.15,-4.67,-8.55,-7.76,-8.55,-11.53c0,-3.09,2.42,-5.5,5.5,-5.5c1.74,0,3.41,0.81,4.5,2.08c1.09,-1.27,2.76,-2.08,4.5,-2.08c3.08,0,5.5,2.41,5.5,5.5c0,3.77,-3.4,6.86,-8.55,11.53l-1.45,1.32z" transform="scale(2.2)"/>
    </g>
</svg>