D3 generated linearGradient not working in Firefox/IE

Question

I\'m working on a D3 library that integrates D3 with AngularJS directives called AngularD3. One of the recent directives allows gradients to be generated that can be bound t

Answer 1

There are a couple of problems here:

1. You seem to have multiple elements in the document with the same ID; your <d3-gradient> element has an ID of gradient too. I'm surprised Chrome still works despite this.
2. I think the main issue here is that your external stylesheet contains url(#gradient). Firefox interprets this as being relative to the stylesheet, rather than relative to the document. I'm not sure why Chrome still works in this scenario, but perhaps it falls back to expanding it relative to the document.

You can read a bit more about Firefox's handling of partial URLs. I believe it is interpreting the specification correctly, while WebKit isn't.

As for the fix, I tried url(../#gradient), but this worked in Firefox and not Chrome/WebKit. You could use an inline style="url(#gradient)" instead.