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>

Looks like it works. ----> [Fiddle](http://jsfiddle.net/gv4rr3mw/). — Weafs.py, Jan 18 '15 at 15:51
Can't get it to work on my side. Still searching for the solution... I will update the fiddle asap — JonasB, Jan 18 '15 at 17:15
This happens when a base tag is defined See http://stackoverflow.com/questions/7759371/svg-gradient-turns-black-when-there-is-a-base-tag-in-html-page — danday74, Jan 05 '16 at 17:03

score 1 · Answer 1 · answered Jan 20 '15 at 15:16

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.

answered Jan 20 '15 at 15:16

JonasB

328
2
11

I seem to be running into just this problem. It only breaks in Firefox though. Chrome seems to be able to handle the reference to the gradient. Firefox may have a problem with it. I'll try to set the attributes by js-code, see if that helps... – Martijn Jun 01 '15 at 12:39
same issue in Chrome and FF using Angular and node. – danday74 Jan 05 '16 at 16:54
setting through JS is also not working, please share simple code – Kira Jun 01 '17 at 15:22

AngularJS SVG line gradient not working

1 Answers1