我可以沿SVG路径应用渐变吗？
我想在我的网站上放置一个由脚本触发的简单加载指示器。 它应该是一个简单的圆弧，它有一个渐变，并在用户等待时旋转。 我还没有尝试过动画部分，但暂时停留在静态样式上。 这是迄今为止我所得到的结果：
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"
width="100" height="100">
<defs>
<linearGradient id="grad1">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="transparent"/>
</linearGradient>
</defs>
<path d="M50 10 A40 40 0 1 0 90 50"
stroke="url(#grad1)" stroke-width="10" fill="transparent"/>
</svg>
它从顶部边缘逆时针旋转到右边缘（270°），但梯度是错误的。 而不是遵循路径，以便开始（顶部边缘，0°）不透明，并且末端（右侧边缘，270°）是透明的，所得弧形笔画的图像在屏幕空间中从左到右着色。
我怎样才能使渐变沿着我的弧线？
Mike Bostock想出了一个办法，但这并不容易：https：//bl.ocks.org/mbostock/4163057
基本上，这种技术使用getPointAtLength将笔画切分成许多短笔划，为每个笔划指定插值的颜色停止点，然后对这些停止点之间的每个短笔划应用渐变。
祝你好运，如果你能接受挑战;）
这种类型的渐变在SVG中不容易实现，请参阅SVG角度渐变。
另外， transparent不是SVG中的有效颜色。 你应该在这个例子中声明stop-opacity ：http://jsfiddle.net/WF2CS/
恐怕最简单的解决方案可能是一系列具有不同不透明度的小弧路径。
另一种方法是制作两个半圆，并在每个笔划上应用相反的线性渐变，并确保它们都包含在ag元素中。 （在我的示例中，组合渐变不是270度，而是360度。两个半圆垂直叠加。第一个渐变（应用于顶部半圆的笔触）将为100-50％不透明度，然后下一个会有0 ％到50％，两个梯度的单位向量设为x1，y1，y2 = 0，x2 = 1，使它们从左到右运行）。然后将transform = rotate（deg，ctrX，ctrY）应用到g。
链接地址: http://www.djcxy.com/p/71073.html