Estou trabalhando em uma biblioteca D3 que integra o D3 às diretivas AngularJS chamadasAngularD3. Uma das diretivas recentes permite que sejam gerados gradientes que podem ser vinculados aos dados e atualizados dinamicamente. Isso parece funcionar em todos os navegadores, exceto no Firefox. No entanto, se eu copiar / colar o SVG de saída em algo como o JSFiddle, ele funcionará, então, estaticamente, tudo bem.

Isso poderia ser uma limitação / bug com o Firefox lidando com atualizações dinâmicas no SVG?

Aqui está uma página de demonstração em que você pode ver isso funcionando no Chrome e Safari, mas não no Firefox:

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

Este código está disponível viao repositório do Github.

O D3 é capaz de criar gradientes que funcionam com o Firefox usando basicamente o mesmo código. Você pode ver isso emO exemplo de Mike aqui. A única diferença que posso encontrar até agora são as atualizações dinâmicas no linearGradient.

Aqui está o<defs> seção do SVG copiada diretamente do Firefox usando "copy html externo" no explorador DOM para referência (formatado para facilitar a leitura):

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

Testado recentemente no IE 10 e 11 e esses também não funcionam.