我可以沿着SVGpath应用渐变吗？
我想在我的网站上放置一个由脚本触发的简单加载指示器。 它应该是一个简单的圆弧，它有一个渐变，并在用户等待时旋转。 我还没有尝试animation部分，但现在暂时停留在静态样式上。 这是迄今为止我所得到的：
<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°），但是梯度是错误的。 而不是沿着path开始（顶边0°）不透明，末端（右边270°）是透明的，弧形笔划的结果图像在屏幕空间中从左到右着色。
我怎样才能使渐变沿着我的弧线？
迈克·博斯托克想出了一个办法，虽然这并不容易： https ： //bl.ocks.org/mbostock/4163057
基本上，这种技术使用getPointAtLength将笔划切分成许多短笔划，为每个笔划指定插值的颜色停止，然后对这些停止之间的每个短笔划应用一个渐变。
祝你好运，如果你能迎接挑战;）
这种types的渐变在SVG中不容易实现，参见SVGangular度渐变 。
而且， transparent不是SVG中的有效颜色。 你应该在这个例子中声明stop-opacity ： http : //jsfiddle.net/WF2CS/
恐怕最简单的解决scheme可能是一系列具有不同不透明度的小弧path。
另一种方法是制作两个半圆，并对每个笔划应用相反的线性梯度，并确保它们都包含在ag元素中。 （在我的例子中，组合渐变不是270度，而是360度。两个半圆是垂直堆叠的，第一个梯度（应用于顶部半圆的笔画）将是100-50％的不透明度，那么下一个会有0 ％到50％，这两个渐变的单位向量设为x1，y1，y2 = 0，x2 = 1，使它们从左到右运行）。然后将transform = rotate（deg，ctrX，ctrY）应用到g。
对不起，在这么晚 – 这可能是有用的 – 从https://github.com/ryanallen/articles/blob/master/img/svg/svg-loading-icon.svg
<svg version="1.1" id="svg-loading-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 80 80" xml:space="preserve"> <path id="loading-spinner" fill="#338833" d="M 40,72 C 22.4,72,8,57.6,8,40 C 8,22.4,22.4,8,40,8 c 17.6,0,32,14.4,32,32 c 0,1.1-0.9,2-2,2 s -2-0.9-2-2 c 0-15.4-12.6-28-28-28 S 12,24.6,12,40 s 12.6,28,28,28 c 1.1,0,2,0.9,2,2 S 41.1,72,40,72 z" > <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 40 40" to="360 40 40" dur="1.5s" repeatCount="indefinite" /> </path> </svg>
;){kind=link}