Question

使用mix-blend-mode测试svg：在Firefox 44中相乘，它根本不会应用混合模式。但在另一页上，我有一个类似的SVG，它显示很好。所以似乎问题出在SVG代码本身......

我已经看到其他一些人遇到类似的问题并且已经查看了所有提议的解决方案，但这些解决方案都没有对我有用。（将背景颜色添加到div，添加透明边框）

HTML：

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

CSS（png后备）：

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

SVG：

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

SVG混合混合模式没有在Firefox中显示

0 个答案: