SVG折线渐变仅适用于描边

Question

我是 svg 绘图的新手。

是否有任何选项可以使用渐变为 svg <polyline> 着色？我只需要给描边上色，但我创建的所有过滤器都对描边和 body.

应用了渐变

事实上，我正在尝试制作这样的发光霓虹灯效果：http://screencloud.net/v/j2hE 现在，当我画一条严格的线时，它现在可以正常使用下面的代码：

<linearGradient id="grad">
    <stop offset="0%" stop-color="#ffd95d"/>
    <stop offset="100%" stop-color="#ffd95d" stop-opacity="0" />
</linearGradient>

但是当我逐圈画线时，它看起来像： http://screencloud.net/v/9M6x（底部是起点，绕圈到顶部是终点）。如您所见，渐变适用于所有多边形，但我只需要在绘制时对线条进行渐变。

有什么选项可以制作我需要的霓虹灯线条吗？为了更好地理解 - 我试图获得类似于名为 "glowing lines".

的默认 Windows 屏幕保护程序的效果

Answer 1

无法沿线条笔划的长度应用 linearGradient。

唯一可以做到的方法是绘制一系列单独着色的 line/path 段，这些段会慢慢淡出。

SVG折线渐变仅适用于描边

SVG polyline gradient apply only to stroke

html

css

svg

polyline