Geek Answers Handbook

D3 generated linearGradient not working in Firefox / IE

I am working on a D3 library that integrates D3 with AngularJS directives called AngularD3 . One of the latest directives allows you to generate gradients that can be associated with data and dynamically updated. This seems to work in every browser except Firefox. However, if I copy / paste SVG output into something like JSFiddle, it works, so statically this is fine.

Could this be a limitation / error with Firefox handling dynamic SVG updates?

Here is a demo page where you can see how it works in Chrome and Safari, but not in Firefox:

https://wealthbar.imtqy.com/angular-d3/

This code is available through the Github repository .

D3 is capable of creating gradients that work with Firefox, using basically the same code. You can see this in Mike's example . The only difference I can find is dynamic updates for linear gradient.

Here is the <defs>SVG section copied directly from Firefox using "copy external 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 it in IE 10 and 11, and they do not work either.

+4
source share
1 answer

There are several issues here:

  • , ID; <d3-gradient> gradient. , Chrome .
  • , , url(#gradient). Firefox , . , Chrome - , , , .

Firefox URL-. , , WebKit - .

, url(../#gradient), Firefox, Chrome/WebKit. style="url(#gradient)".

+6

More articles:


All Articles