AngularJS SVG线渐变不起作用

Question

我注意到在AngularJS项目中构建SVG动画时出现了一个问题。我想在我的路径上创建一个渐变效果。

path元素是用SnapSVG创建的，应用的id是"progressLine“。这个元素的样式是用css定义的，如下所示。我还在我的SVG中手动创建了一个垂直渐变，其中我有我的渐变。问题是，如果我应用“描边:红色”的规则，它将显示红色描边，但是渐变将不起作用。我已经在我的项目中构建了多条渐变线，所以我相信语法不是问题。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>

​

Answer 1

我通过使用js创建渐变并将其归于我的路径，从而使其工作。我假设我的url引用是因为AngularJS路由的工作方式而中断的。我不能确认这一点，也没有时间研究更多细节，我只是通过绕过它来帮助自己。