Question

我在AngularJS项目中构建SVG动画时发现了一个问题。我想要创建的是对我的路径的渐变效果。

路径元素是使用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创建渐变并将其归因于我的路径来实现它。由于AngularJS路由的工作原理，我假设我的网址引用中断了。我无法确认，也没有时间去研究更详细的内容，我只是绕过它来帮助自己。

AngularJS SVG线梯度不起作用

1 个答案: