Css firefox中未显示SVG混合模式

使用混合模式测试svg：在Firefox44中使用乘法，它根本不会应用混合模式。但在另一个页面上，我有一个类似的SVG，它显示的很好。所以看起来问题在于SVG代码本身

我见过其他一些人也有类似的问题，并且看过所有提议的解决方案，但没有一个对我有效。（向div添加背景色，添加透明边框）

HTML:

SVG：

关于bg
路径{混合模式：乘法；}
椭圆{混合混合模式：乘法；}

transform属性创建新的堆叠上下文，因此元素不能相互混合。感谢Robert，这确实是问题所在。我在这里找到了一些解决方案：有趣的是，在另一个页面上，包含转换的SVG正确地显示出来。奇怪的错误。对于那些使用Sketch导出SVG的人来说，这里有一篇关于如何导出干净的SVG代码而不在其中进行转换的好书：最终对我有效的是从Sketch中删除所有组，并使用slice工具导出SVG。

 <div class="about-background clearfix">
            <object class="willItBlend" data="../svg/about-bg.svg" type="image/svg+xml"></object>
            <img class="blender" src="../svg/about-bg.png" />
</div>

@supports not(mix-blend-mode: multiply) {
    .blender {
        display: block;
    }
    .willItBlend {
        display: none;
    }

<svg width="489" height="441" viewBox="0 0 489 441" xmlns="http://www.w3.org/2000/svg">
  <title>
    about-bg
  </title>

      <style>
       path { mix-blend-mode: multiply; }
       ellipse { mix-blend-mode: multiply; }
    </style>
  <g fill="none" fill-rule="evenodd">
    <g transform="translate(-236.973 -308)" stroke-width="33.6">
      <ellipse stroke="#E2E42E" cx="345.986" cy="357.28" rx="345.986" ry="357.28"/>
      <ellipse stroke="#ED1F71" cx="346.972" cy="358.298" rx="295.715" ry="305.368"/>
      <ellipse stroke="#03A8DE" cx="346.972" cy="358.298" rx="244.458" ry="252.437"/>
    </g>
    <g transform="translate(-284 -294.56)">
      <path d="M345.986 714.56c191.083 0 345.987-159.96 345.987-357.28C691.973 159.96 537.07 0 345.986 0 154.903 0 0 159.96 0 357.28 0 554.6 154.903 714.56 345.986 714.56z" stroke="#E2E42E" stroke-width="11.2"/>
      <ellipse stroke="#ED1F71" stroke-width="22.4" cx="346.972" cy="358.298" rx="295.715" ry="305.368"/>
      <ellipse stroke="#03A8DE" stroke-width="22.4" cx="346.972" cy="358.298" rx="244.458" ry="252.437"/>
    </g>
    <g transform="translate(-138.44 -164.64)">
      <path d="M247.453 510.72c136.665 0 247.453-114.33 247.453-255.36C494.906 114.33 384.118 0 247.453 0 110.788 0 0 114.33 0 255.36c0 141.03 110.788 255.36 247.453 255.36z" stroke="#E2E42E" stroke-width="11.2"/>
      <ellipse stroke="#ED1F71" stroke-width="5.6" cx="248.573" cy="256.48" rx="211.623" ry="218.4"/>
      <ellipse stroke="#03A8DE" stroke-width="5.6" cx="247.453" cy="256.48" rx="174.673" ry="180.32"/>
    </g>
  </g>
</svg>