0

Testing an svg using mix-blend-mode: multiply in Firefox 44 and it will not apply the blend-mode at all. But on another page I have a similar SVG and it shows fine. So it seems like the problem is with the SVG code itself...

I've seen a few other people having similar issues and have looked at all the proposed solutions, none of which worked for me. (adding background-color to div, adding a transparent border)

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 fallback):

@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>
Pascal Tremblay
  • 23
  • 1
  • 6
  • The transform attributes create new stacking contexts so the elements can't blend with each other. – Robert Longson Feb 21 '16 at 07:21
  • Thanks Robert that was indeed the issue. I found some solutions here: http://stackoverflow.com/questions/13329125/removing-transforms-in-svg-files The funny thing is that on another page an SVG with Transforms in it shows properly. Weird bug. – Pascal Tremblay Feb 21 '16 at 19:07
  • For those using Sketch to export the SVG, here's a nice writeup on how to export clean SVG code without Transforms in it: https://medium.com/sketch-app-sources/exploring-ways-to-export-clean-svg-icons-with-sketch-the-correct-way-752e73ec4694#.a7zin7qwg – Pascal Tremblay Feb 21 '16 at 19:11
  • What ended up working for me is removing all groups from within Sketch and using the slice tool to export the SVG. – Pascal Tremblay Feb 21 '16 at 19:21

0 Answers0