SVG角度梯度

Question

有没有办法在SVG中进行'角度渐变'？

(我不知道官方用语 - 它是你在颜色选择器中看到的那种渐变,它随角度而变化.)

SVG似乎只支持线性和径向渐变,但我想可能有某种方法可以使用变换来模拟我想要的东西.

谢谢!

Answer 1

……10 年后……

CSS 现在支持锥形渐变，尽管在撰写本文时浏览器支持是混合的。

您可以将 a<clipPath />应用于<foreignObject />其内容使用 CSS 锥形渐变来实现所需的效果。

https://codepen.io/eastonium/pen/abOpdEm

Answer 2

角度(锥形)渐变没有标准支持.

但是请参阅http://wiki.inkscape.org/wiki/index.php/Advanced_Gradients#Conical_gradient以获取一些近似方法(不包括源代码).该链接上的示例不起作用.

Answer 3

以下是使用模式的方法：https : //jsfiddle.net/prozoroff/8eodzrke/

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="800" width="800">
    <defs>
        <linearGradient id="Gradient1" gradientTransform="rotate(90)">
            <stop offset="0%" stop-color="#ff0000"/>
            <stop offset="100%" stop-color="#00ff00"/>
        </linearGradient>
        <linearGradient id="Gradient2" gradientTransform="rotate(90)">
            <stop offset="0%" stop-color="#0000ff"/>
            <stop offset="100%" stop-color="#00ff00"/>
        </linearGradient>
        <pattern id="Pattern" x="0" y="0" width="600" height="600" patternUnits="userSpaceOnUse">
            <g transform="rotate(0, 300, 300)">
                <rect shape-rendering="crispEdges" x="0" y="0" width="300" height="600" fill="url(#Gradient1)"/>
                <rect shape-rendering="crispEdges"  x="300" y="0" width="300" height="600" fill="url(#Gradient2)"/>
            </g>
       </pattern>
  </defs>
  <path id='arc5' style="stroke: url(#Pattern);" fill='transparent' stroke-width='60' d='M 364 58 A 250 250 0 1 1 235 58'/>
</svg>

Answer 4

在我对这个类似问题的回答中,我使用了六个线性渐​​变来逼近圆锥形渐变.如果你只需要一个圆的行程/周长的渐变,而不是填充,那么它应该是一个足够好的近似值.

svg圆形笔划上的多种颜色