我想在我的网站上放置一个由脚本触发的简单加载指示器。它应该是一个简单的圆弧，有渐变并且在用户等待时旋转。我还没有尝试过动画部分，但现在陷入了静态样式。这是我到目前为止所得到的：
<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°）透明。
如何使渐变遵循我的弧线路径？
迈克·博斯托克 (Mike Bostock) 找到了一个方法，尽管这并不容易： https://bl.ocks.org/mbostock/4163057
基本上，此技术使用
getPointAtLength要将笔划分割成许多短笔划，请为每个笔划指定插值颜色停止点，然后对这些停止点之间的每个短笔划应用渐变。如果您能够应对挑战，祝您好运；）
编辑（2019 年 7 月 3 日）：
现在有一个库可以帮助您准确地完成您正在寻找的事情。不需要使用 D3，但如果您愿意，也可以使用。 这是有关 Medium 的教程.
CSS 图像模块 - 第 4 级引入了 conic-gradient 。根据 MDN，支持 在除 IE 之外的所有主要浏览器中。
尽管从技术上讲，它不是沿着路径的渐变，但由于您的路径是圆形，因此可以通过以下方式实现所需的结果：
.loader { --size: 7.5rem; --stroke-size: .5rem; --diff: calc(calc(var(--size)/2) - var(--stroke-size)); background-image: conic-gradient(transparent 25%, red); width: var(--size); height: var(--size); border-radius: 50%; -webkit-mask:radial-gradient(circle var(--diff),transparent 98%,#fff 100%); mask:radial-gradient(circle var(--diff),transparent 98%,#fff 100%); animation: rotate 1.2s linear infinite; margin: 0 auto; } @keyframes rotate { from { transform: rotate(0); } to { transform: rotate(1turn); } } body { background: #f9fcfc url(https://picsum.photos/id/22/1323/880) 100% /cover; margin: 0; min-height: 100vh; padding-top: 2.5rem; } * { box-sizing: border-box; }