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>

Answer 1

我通过使用 js 创建渐变并将其归因于我的路径来使其工作。我假设我的 url 引用由于 AngularJS 路由的工作方式而中断。我无法确认，也没有时间研究更详细的内容，我只是通过绕过它来帮助自己。