Ich arbeite an einer D3-Bibliothek mit dem Namen @, die D3 in AngularJS-Direktiven integrier AngularD3. Eine der jüngsten Richtlinien ermöglicht die Erzeugung von Verläufen, die an Daten gebunden und dynamisch aktualisiert werden können. Dies scheint in jedem Browser außer Firefox zu funktionieren. Wenn ich jedoch die Ausgabe-SVG in etwas wie JSFiddle kopiere / einfüge, funktioniert sie, also ist sie statisch in Ordnung.

Könnte dies eine Einschränkung / ein Fehler in Firefox sein, der dynamische Aktualisierungen der SVG verarbeitet?

Hier ist eine Demo-Seite, auf der Sie sehen können, dass dies in Chrome und Safari funktioniert, aber nicht in Firefox:

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

Dieser Code ist verfügbar überdas Github-Repository.

D3 ist in der Lage, Farbverläufe zu erstellen, die mit Firefox funktionieren, wobei weitgehend derselbe Code verwendet wird. Sie können dies in @ seh Mikes Beispiel hier. Der einzige Unterschied, den ich bisher feststellen kann, sind die dynamischen Aktualisierungen des linearGradient.

Hier ist der<defs>er Abschnitt @ der SVG-Datei wurde direkt aus Firefox kopiert, wobei "copy outer html" im DOM-Explorer als Referenz verwendet wurde (zur besseren Lesbarkeit formatiert):

<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>

Dies wurde kürzlich in IE 10 und 11 getestet und funktioniert auch nicht.