1

我知道那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它应用于一个组而不是单个对象。

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

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

4

3 回答 3

1

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

于 2013-06-29T03:21:46.940 回答
1

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

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

于 2013-07-02T14:17:08.323 回答
1

在SVG 规范中，当谈到梯度单位时，你首先应用变换是有说明的。

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

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

于 2013-07-02T15:12:19.210 回答