AngularJS SVG线性渐变不起作用。

Question

我在构建AngularJS项目的SVG动画时遇到了问题。 我想创建的是我的路径上的渐变效果。路径元素是使用SnapSVG创建的，并应用了"id = progressLine"。此元素的样式由CSS定义，如下所示。我还在SVG内手动创建了垂直渐变。问题是，如果我应用“stroke：red”的规则，它将显示红色描边，然而渐变不起作用。我在项目中构建了多条渐变线，因此我相信语法没有问题。CSS规则也正确引用，但渐变不会显示。有人知道这个问题并可能有解决方案吗？

#progressLine {
  stroke: url(#gradient);
  stroke-width: 2;
}

<svg id="leaderBoardSVG" width="90%" height="80%" viewBox="0 0 100 100">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:0.5" />
      <stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
</svg>

- JonasB

---

你应该同时包含 #progressLine 的代码。 - Weafs.py

看起来它可以工作。 ----> Fiddle。 - Weafs.py

无法在我的端上使其工作。仍在寻找解决方案... 我会尽快更新代码演示。 - JonasB

当定义了一个基础标记时，会发生这种情况。请参见https://dev59.com/m2sz5IYBdhLWcg3wpZdF。 - danday74

Answer 1

我通过使用JavaScript创建渐变并将其归因于我的路径来使其工作。我认为我的URL引用是由于AngularJS路由的工作方式而导致的。我无法确认，也没有时间进行更详细的研究，所以我通过绕过它来帮助自己。

- JonasB

---

我似乎遇到了这个问题。不过只有在Firefox中才会出现问题。Chrome能够处理对渐变的引用。Firefox可能存在问题。我将尝试通过JS代码设置属性，看看是否有所帮助... - Martijn

使用Angular和Node，Chrome和FF存在相同的问题。 - danday74

设置通过JS也无法工作，请分享简单的代码。 - Kira