Question

我了解在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方法。

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

Answer 1

您应该将形状定义为剪辑路径，然后将其应用于填充了所需渐变的矩形。您也可以使用过滤器，尽管这有点复杂。

Answer 2

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

为了达到你想要的效果，使用迈克尔的解决方案，或创建第二个渐变，其中x，y和x2，y2翻转以匹配180度旋转。

Answer 3

当您讨论gradientUnits时，SVG specification for gradients中会说明您首先应用变换...

如果gradientUnits =“userSpaceOnUse”，则“x1”，“y1”，“x2”和“y2”表示坐标系中的值，这些值是将当前用户坐标系置于引用渐变元素的时间（即，通过'fill'或'stroke'属性引用渐变元素的元素的用户坐标系），然后应用属性'gradientTransform'指定的转换。

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

SVG填充和转换

3 个答案: