我可以沿着 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="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 °)是透明的，弧线笔划的结果图像是从左到右在屏幕空间着色。
我怎样才能使梯度跟随我的弧线路径？
最佳答案