Estoy trabajando en una biblioteca D3 que integra D3 con directivas AngularJS llamadaAngularD3. Una de las directivas recientes permite generar gradientes que pueden vincularse a los datos y actualizarse dinámicamente. Esto parece funcionar en todos los navegadores, excepto Firefox. Sin embargo, si copio / pego el SVG de salida en algo como JSFiddle, funciona, así que estáticamente está bien.

¿Podría ser esto una limitación / error con Firefox manejando actualizaciones dinámicas al SVG?

Aquí hay una página de demostración donde puedes ver esto funcionando en Chrome y Safari pero no en Firefox:

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

Este código está disponible a través deel repositorio de Github.

D3 es capaz de crear gradientes que funcionan con Firefox utilizando en gran medida el mismo código. Puedes ver esto enEl ejemplo de Mike aquí. La única diferencia que puedo encontrar hasta ahora es la actualización dinámica de linearGradient.

Aquí está el<defs> sección del SVG copiado directamente desde Firefox usando "copiar html externo" en el explorador DOM para referencia (formateado para facilitar la lectura):

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

Recientemente probé esto en IE 10 y 11 y tampoco funcionan.