SVG线性渐变在Firefox Angular JS应用程序中不能用作css类？

Question

请参阅下面的“更新”了解更新信息

我有一个SVG步骤图，它可以在除Firefox之外的所有浏览器中完美运行。 以下是它在Safari 9.1中的外观：

在Firefox中，缺少具有渐变的细分。这件作品是用4个圆圈和3个矩形创建的，都是灰色的。类被分配给每个项目，然后应用程序中其他地方的js代码在使用应用程序时分配形状类。

我将文档中定义的渐变定义为SVG渐变，ID为“进行中”

  <defs>
      <linearGradient id="inprogress">
        <stop offset="5%" stop-color="#3e53a4"></stop>
        <stop offset="95%" stop-color="#cf0989"></stop>
      </linearGradient>
 </defs>

我在CSS中引用这个渐变：

.inprogress {
   fill: url('#inprogress');
 }

最后，它在CSS中分配给图表中的矩形：

<rect id="seg1" class="inprogress" x="35.8853125" y="14.6415625" width="142.743125" height="8.1309375"></rect>

这是通过这种方式完成的，这样我们就可以在Javascript中为应用程序进行分配。

更新

通过进一步测试，codepen在FF中工作，因为css类在那里是硬编码的。但是在应用程序中，为类添加了AngularJS绑定（它们设置了诸如“完成”和“进行中”之类的东西）。这是它失败的地方，但我不知道为什么。在检查代码时，课程就在那里。

Codepen网址：http://codepen.io/smlombardi/pen/NxMOMy?editors=1100

更新2

进一步曲折的实验已经证明了问题（仅在FF中，并且仅在Angular应用程序中）是SCSS将梯度def称为具有css类中的散列的url。但是，如果我使用fill: url('/#purpleGradient');，则只能在Firefox 中使用。