有没有办法在 SVG 中做一个“角度渐变”？
（我不知道官方术语——这是你在颜色选择器中看到的那种渐变，它随角度而变化。）
SVG 似乎只支持线性和径向渐变，但我认为可能有某种方法可以使用变换来模拟我想要的。
谢谢！
问问题
28567 次
8 回答
14
……十年后……
CSS 现在支持锥形渐变，尽管在撰写本文时浏览器支持是混合的。
您可以将 a<clipPath />应用于<foreignObject />其内容使用 CSS 锥形渐变来达到预期效果的 a。
于 2020-02-24T05:45:58.553 回答
12
没有标准支持进行角度（锥形）渐变。
但请参阅http://wiki.inkscape.org/wiki/index.php/Advanced_Gradients#Conical_gradient了解一些近似方法（但不包括源代码）。该链接上的示例不起作用。
于 2010-03-17T20:16:38.870 回答
6
这是使用模式的方法：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>于 2017-12-27T12:13:42.830 回答
4
在我对这个类似问题的回答中，我使用了六个线性渐变来近似圆锥渐变。如果您只需要圆的笔触/周长的渐变，而不是填充，那么它应该是一个足够好的近似值。
于 2014-06-01T15:47:14.980 回答
1
这是一个可能的矢量锥形渐变，但只有 VML (+IE) 可以做到...：
于 2011-07-10T07:23:07.357 回答
1
如果您深入研究此页面，您会发现通过将 SVG 中的圆锥渐变绘制为一系列 1 度弧线来近似圆锥渐变的代码。
于 2018-07-16T19:50:40.963 回答
1
添加一个具有 100% 宽度和高度的模式，因此它只是一个重复模式
<div style="width:100px">
<svg viewBox="0 0 35 35" style="transform: scale(1) rotate(-90deg)">
<defs>
<pattern
id="p1"
patternUnits="userSpaceOnUse"
width="100%"
height="100%"
patternTransform="rotate(90)"
>
<image href="https://blogs.igalia.com/dpino/files/2020/06/conic-gradient.png" width="36" height="36" />
</pattern>
</defs>
<g>
<circle
cx="50%"
cy="50%"
stroke-width="2"
r="15.915"
stroke-dasharray="89, 100"
stroke="url(#p1)"
fill="none"
/>
</g>
</svg>
</div>于 2021-12-17T11:43:30.160 回答
-1
于 2011-04-05T17:07:16.760 回答