我想在我的网站上放置一个由脚本触发的简单加载指示器。它应该是一个简单的圆弧,具有渐变并且在用户等待时旋转。我还没有尝试过动画部分,但暂时停留在静态样式上。到目前为止,这是我得到的:
<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 日):
There is now a library that will help you do exactly what you're looking for.使用 D3 不是必需的,但如果您愿意,也可以使用。 Here's a tutorial on Medium .
关于svg - 我可以沿 SVG 路径应用渐变吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57563487/