D3 generated linearGradient not working in Firefox

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 to data and update dynamically. This seems to work on every browser except Firefox. However, if I copy/paste the output SVG into something like JSFiddle it works, so statically it's fine.

Could this be a limitation/bug with Firefox handling dynamic updates to the SVG?

Here is a demo page where you can see this working in Chrome and Safari but not in Firefox:

https://wealthbar.github.io/angular-d3/

This code is available via the Github repository.

D3 is able to create gradients that do work with Firefox using largely the same code. You can see this in Mike's example here. The only difference I can find so far is the dynamic updates to the linearGradient.

Here is the <defs> section of the SVG copied directly from Firefox using "copy outer html" in the DOM explorer for reference (formatted for readability):

<defs>
  <linearGradient y2="100%" y1="0%" x2="100%" x1="0%" id="gradient">
    <stop offset="0%" stop-color="#098aae" stop-opacity="0.6"></stop>
    <stop offset="100%" stop-color="#684684" stop-opacity="0.9"></stop>
  </linearGradient>
</defs>

Recently tested this in IE 10 and 11 and those do not work either.

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.