AngularJS SVG line gradient not working

Question

I have noticed a problem when building an SVG animation in an AngularJS project. What I want to create is a gradient effect over my path.

The path element is created with SnapSVG and is applied and id of "progressLine". Styling of this element is defined with css and is like this. I have also created a vertical gradient manually inside my SVG where I have my gradient. The problem is that if I apply the rule of "stroke:red" it will show a red stroke, a gradient however will not work. I have built multiple gradient lines in my projects, so I believe the syntax is not a problem. The css rule is also referencing correctly, but the gradient won't show. Is anyone aware of this issue and possibly has a solution?

#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

I got it to work by creating the gradient with js and attributing it to my path. I'm assuming my url reference was breaking because of how AngularJS routing works. I can't confirm it, nor did I have the time to look into more detailed and I just helped myself by bypassing it.