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="transparent"/>
        </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

迈克博斯托克想出了办法，虽然这并不容易： https://bl.ocks.org/mbostock/4163057

基本上，这种技术使用getPointAtLength将笔划切割成许多短笔划，为每个笔划指定插值颜色停止，然后对这些停靠点之间的每个短笔划应用渐变。

如果您能够接受挑战，祝你好运;）

Answer 2

这种类型的渐变在SVG中并不容易实现，请参阅SVG angular gradient。

此外，transparent不是SVG中的有效颜色。您应该在此示例中说明stop-opacity：http://jsfiddle.net/WF2CS/

我担心最简单的解决方案可能是一系列具有不同不透明度的小弧线路径。

Answer 3

我也遇到了这个问题，因此I created a library to assist沿path跟随渐变的创建。您可以在Javascript中独立使用它，也可以根据需要与D3.js一起使用。该库100％基于第一个答案中提到的Mike Bostock的工作，但是我删除了D3作为必需的依赖项。

I've also written a brief tutorial on Medium describing the backstory and usage.。

Answer 4

另一种方法是制作两个半圆并将相反的线性渐变应用于每个笔划，并确保它们都包含在g元素中。（在我的例子中，组合渐变不是270度而是360.两个半圆垂直堆叠。第一个渐变（应用于顶部半圆的笔划）将是100-50％不透明度，然后下一个将具有0两个渐变都将单位矢量设置为x1，y1，y2 = 0和x2 = 1，使它们从左向右运行。）然后将transform = rotate（deg，ctrX，ctrY）应用于g。

Answer 5

path{
 fill : url(#gradient)
}

<svg width="660" height="220">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   stop-color="#05a"/>
      <stop offset="100%" stop-color="#0a5"/>
    </linearGradient>
  </defs>
 <path d="M150 0 L75 200 L225 200 Z" />
</svg>

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

5 个答案: