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

Question

我想在我的网站上放置一个由脚本触发的简单加载指示器。它应该是一个简单的圆弧，有渐变并且在用户等待时旋转。我还没有尝试过动画部分，但现在陷入了静态样式。这是我到目前为止所得到的:

<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="red" stop-opacity="0" />
            </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°)透明。

如何使渐变遵循我的弧线路径？

Answer 1

迈克·博斯托克 (Mike Bostock) 找到了一个方法，尽管这并不容易: 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 .