SVG 填充和变换答案

【问题标题】：SVG Fill and TransformSVG 填充和变换
【发布时间】：2013-06-28 14:24:43
【问题描述】：

我知道fill 在transform 之后应用，但我不明白为什么。我查看了规范，但找不到有关原因的信息。

我想知道是否有办法将fill 应用于一组元素，其中一些元素以一致的方式使用transform: rotate。为了说明问题，请参见下面的示例代码：

<svg width='38' height='18' viewBox='0 0 38 18' xmlns='http://www.w3.org/2000/svg'>
    <defs>
        <linearGradient id='gradientFill' x2='0' y2='100%' gradientUnits='userSpaceOnUse'>
            <stop stop-color='hsl(0, 0%, 0%)' />
            <stop offset='100%' stop-color='hsl(0, 0%, 100%)' />
        </linearGradient>
        <path id='shape' d='M0,0m9,0c-3.92,0,-7.24,2.51,-8.48,6h3.29c0.83,-1.92,2.8,-3.56,5.19,-3c2.52,0.59,3,3.55,3,6c0,3.6,-0.6,6,-3,6s-3,-2.4,-3,-6h-6c0,4.97,4.03,9,9,9c4.97,0,9,-4.03,9,-9s-4.03,-9,-9,-9z'/>
        <g id='test'>
            <use xlink:href='#shape'></use>
            <use transform='translate(20,0) rotate(180,9,9)' xlink:href='#shape'></use>
        </g>
    </defs>
    <use class='logo' xlink:href='#test' fill="url(#gradientFill)"></use>
</svg>

如您所见，在未旋转的元素上，渐变从上到下运行，正如预期的那样。然而，在旋转的元素上，渐变也会旋转，使其从下到上运行。这对我来说似乎不一致，因为 fill 应用于一个组而不是单个对象。

我的最终愿望是让线性渐变在两个形状上从上到下流动，但如果可能的话，我想继续使用use 和transform 方法。

有人可以在规范方面指出我正确的方向，并提出解决方案来实现我的目标吗？

【问题讨论】：

标签： svg transform gradient fill

【解决方案1】：

像“fill”这样的属性不是对对象进行操作的命令，它们是对象在渲染时使用的属性，并且由对象的子对象继承。和 CSS 规则一样。

要达到您想要的效果，请使用 Michael 的解决方案，或创建第二个渐变，使其 x,y 和 x2,y2 翻转以匹配 180 度旋转。

【讨论】：

【解决方案2】：

SVG specification for gradients 在谈到梯度单元时会说明您首先应用变换...

如果 gradientUnits="userSpaceOnUse", 'x1', 'y1', 'x2' 和 'y2' 表示坐标系中的值，这些值是由当前用户坐标系在引用渐变元素的时间（即，通过“填充”或“笔划”属性引用渐变元素的元素的用户坐标系）然后应用属性“渐变变换”指定的变换。 em>

如果你对元素应用变换，它会改变元素的坐标系，因此也会影响渐变。

【讨论】：

【解决方案3】：

您应该将您的形状定义为剪辑路径，然后将其应用于填充了您想要的渐变的矩形。你也可以用过滤器来做，虽然这有点复杂。

【讨论】：