无法弄清楚为什么我的svg渐变在我的计算机上运行时无法在Firefox中显示

Question

我使用Node 8.9.1，NPM 5.8.1和Angular 5与CLI 1.6.7。我有几个元素使用相同的颜色渐变和不同的参数，如下图所示。

为了最大限度地减少文档中的代码量，我在一个渐变中定义颜色，然后在其他渐变中使用href引用它，如此

<radialGradient id="border_clr_prim_t">
    <stop  offset="0" style="stop-color:#FFFFFF"/>
    <stop  offset="0.6007" style="stop-color:#DBE2E8"/>
    <stop  offset="1" style="stop-color:#C0CDD8"/>
</radialGradient>

<radialGradient
    id="border_clr_t01"
    href="#border_clr_prim_t"
    cx="141.8091" cy="193.6915" r="9.4921"
    gradientTransform="matrix(-4.764515e-02 0.9989 -0.6589 -3.142960e-02 276.1911 58.1311)"
    gradientUnits="userSpaceOnUse">
</radialGradient>

<path id="lp_01"
    style="fill:url(#border_clr_t01);"
    d="M148.4,196.1l-0.5-4.9c-1.3,0.1-2.6,0.2-4,0.2c-2.5,0-5.1-0.3-7.5-0.8l-1,4.8l-0.1,0.3c2.8,0.6,5.7,0.9,8.6,0.9c1.5,0,3-0.1,4.5-0.2L148.4,196.1z"
/>

我使用<symbol>将图形组织成图层，这样我就可以在HTML中单独处理它们。如果你view this plunkr，我会看到我有3个标题为嵌入式功能， src路径和 plain svg 的方框。在Chrome中，您会注意到 src路径是空的，这是预期的，而在Firefox中，所有3个都是可见的，这也是预期的。我的问题是在我的应用程序中运行相同的代码时，使用渐变的元素（如上面的示例）在Firefox中无法呈现。我最初将plunkr作为一个最小的可验证示例来询问为什么函数嵌入一个人不会渲染它只是为了发现它实际上在plunkr中。

我走了一步，用我的图形制作了一个plunker和stackblitz演示，它们在Firefox中都表现得非常好。我已经完成了我的代码，除了内部工作之外，无法弄清楚plunker和stackblitz有什么不同。由于Chrome中的错误，我不能像通常那样src，我需要使用该功能嵌入它以及svg4everybody插件。有没有人知道在我的机器上会发生什么？