我可以沿着SVG路径应用渐变吗？

我想在我的网站上放置一个由脚本触发的简单加载指示器。它应该是一个简单的圆弧，有一个梯度，在用户等待时旋转。我还没有尝试过动画部分，但是现在静态的样式已经被卡住了。以下是到目前为止我得到的信息：

---

这种渐变在SVG中不容易实现，请参阅

另外，

透明

在SVG中不是有效的颜色。您应该声明

停止不透明度

，如本例所示：

---

恐怕最简单的解决方案可能是一系列不透明度不同的小圆弧路径。

另一种方法是制作两个半圆，对每个笔划应用相反的线性渐变，并确保它们都包含在g元素中。（在我的示例中，组合的渐变不是270度而是360度。两个半圆垂直堆叠。第一个渐变（应用于顶部半圆的笔划）将为100-50%不透明度，然后下一个渐变将为0%到50%。两个渐变的单位向量都设置为x1、y1、y2=0和x2=1，使它们从左向右运行。）然后将transform=rotate（deg，ctrX，ctrY）应用于g。

迈克·博斯托克想出了一种方法，尽管这并不容易：

基本上，此技术用于将笔划分割为多个短笔划，为每个笔划指定插值颜色停止点，然后在这些停止点之间对每个短笔划应用渐变

如果你能接受挑战，祝你好运；）

编辑（2019年7月3日）：

---

不需要使用D3，但如果您愿意，您可以使用

我也有这个问题，所以在创建沿着

路径的渐变时

。如果愿意，您可以在Javascript中单独使用它，也可以与D3.js一起使用。该库100%基于第一个答案中引用的Mike Bostock的工作，但我已经删除了D3作为必需的依赖项

.

路径{
填充：url（#渐变）
}

请向下投票人解释为什么他们认为这个问题不值得问？是的，我考虑过合并许多小圆弧段，但不幸的是，您不能只指定边界框和开始和停止角度，但您需要告诉它停止的x和y坐标。这是一大堆十进制数，离线计算，听起来梯度分布不均匀。在每一个半圈的中间，它走得更快，在它们的连接端静止不动。一个改进是使用4个四分之一圆，为了使其完美，您需要无限多个sircle段。。。即。渲染每个像素。基本上这意味着“否”。迈克·博斯托克所做的是完全由他自己创造梯度。您可以复制他的代码，并尝试对其进行修改以满足您的需要，但正如前面所说的，不会那么简单……：）请使用@Dostonbek-Oripjonov方法，因为使用此方法，浏览器的开发人员将处理更新和修复。它还应该比javascript更好地运行x10。如果有多个

路径