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

迈克·博斯托克想出了一个办法，尽管这并不容易：https://bl.ocks.org/mbostock/4163057

基本上，该技术使用 getPointAtLength 将笔画分割成许多短笔画，为每个短笔画指定内插色标，然后将渐变应用到这些色标之间的每个短笔画。

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

编辑（2019 年 7 月 3 日）：

There is now a library that will help you do exactly what you're looking for. 使用 D3 不是必需的，但您可以根据需要使用。 Here's a tutorial on Medium。

---

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

此外，transparent 不是 SVG 中的有效颜色。您应该在此示例中声明 stop-opacity：http://jsfiddle.net/WF2CS/

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

---

路径{ 填充 : url(#gradient) }

---

CSS 图像模块 - 第 4 级引入了 conic-gradient。根据 MDN，it's supported 在除 IE 之外的所有主要浏览器中。

尽管从技术上讲，它不是沿路径的渐变，但由于您的路径是圆形，因此可以通过以下方式实现所需的结果：

.loader { --size: 7.5rem; --笔画大小：0.5rem； --diff: calc(calc(var(--size)/2) - var(--stroke-size));背景图像：圆锥渐变（透明 25%，红色）；宽度：var(--size);高度：var（--size）；边界半径：50%； -webkit-mask:radial-gradient(circle var(--diff),透明 98%,#fff 100%);掩码：径向渐变（圆形变量（--diff），透明 98%，#fff 100%）；动画：旋转1.2s线性无限；边距：0 自动； } @keyframes 旋转 { 从 { 变换：旋转（0）； } 到 { 变换：旋转（1 转）； } } body { 背景：#f9fcfc url(https://picsum.photos/id/22/1323/880) 100% /cover;边距：0；最小高度：100vh；填充顶部：2.5rem； } * { 框大小：边框框； }

相关位是

background-image: conic-gradient(transparent 25%, red);

注意：如果不是很明显，CSS 变量不是必需的，我只是想要一种方法来测试它的多种尺寸，而不必在多个地方修改值。
注意: 也可以使用 <svg /> 来掩盖内圈。我怀疑它可能比 mask 有更好的浏览器支持。但这超出了这个问题的范围。

在发布时，我的示例似乎在最新版本中按预期工作：Chrome、Firefox 和 Edge。没有测试过 Safari。没想到它可以在任何版本的 IE 中工作。

---

我也遇到了这个问题，所以 I created a library to assist 在创建沿着 path 的渐变。如果您愿意，您可以在 Javascript 中单独使用它或与 D3.js 一起使用它。该库 100% 基于 Mike Bostock 在第一个答案中引用的工作，但我已将 D3 作为必需的依赖项删除。

I've also written a brief tutorial on Medium describing the backstory and usage.。

---

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

---

我设法在 https://www.w3schools.com/graphics/svg_grad_radial.asp 之后应用了某种渐变。

例如：Codepen svg multiple path

---