Сгенерированный D3 linearGradient не работает в Firefox / IE

Я работаю над библиотекой D3, которая интегрирует D3 с директивами AngularJS под названиемAngularD3, Одна из последних директив позволяет генерировать градиенты, которые могут быть связаны с данными и обновляться динамически. Кажется, это работает на всех браузерах, кроме Firefox. Однако, если я скопирую / вставлю вывод SVG во что-то вроде JSFiddle, это сработает, так что статически это нормально.

Может ли это быть ограничением / ошибкой в ​​Firefox, обрабатывающем динамические обновления SVG?

Вот демонстрационная страница, где вы можете увидеть, как это работает в Chrome и Safari, но не в Firefox:

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

Этот код доступен черезхранилище Github.

D3 может создавать градиенты, которые работают с Firefox, используя в основном один и тот же код. Вы можете увидеть это вПример Майка здесь, Единственное отличие, которое я могу найти, - это динамические обновления linearGradient.

Здесь<defs> раздел SVG, скопированный напрямую из Firefox с использованием «copy external html» в обозревателе DOM для справки (отформатирован для удобства чтения):

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

Недавно проверил это в IE 10 и 11, и они тоже не работают.