我想在我的网站上放置一个由脚本触发的简单加载指示器。它应该是一个简单的圆弧，它有一个渐变并且在用户等待时正在旋转。我还没有尝试过动画部分，但现在停留在静态样式上。这是我到目前为止所得到的：
<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°）透明，而是在屏幕空间中从左到右对弧形笔划的结果图像进行着色。
如何使渐变遵循我的弧形路径？