Clipping path in SVG not working in Safari

html svg safari clipping
Rob Erskine picture Rob Erskine · Jan 17, 2013 · Viewed 10.3k times · Source

I've created a simple polygon in Illustrator and then created a clipping path (mask) in front of an image. I've exported it as an SVG file, and it renders perfectly in Chrome and Safari.

However, when I create an HTML file using the SVG data, it renders perfectly in Chrome but not Safari 6.0.2.

Not quite sure what I might be doing wrong; I've created examples of the SVG example (personal site) and the HTML (example on jsfiddle).

Answer

methodofaction picture methodofaction · Jan 17, 2013

You must be running into a bug in Safari, instead of using use to apply the mask, just use the actual polygon element:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="700px" height="700px" viewBox="0 0 700 700" style="enable-background:new 0 0 700 700;" xml:space="preserve">
  <g>  

    <clipPath id="SVGID_2_">
      <polygon id="SVGID_1_" points="576.35,444.245 670.595,350 576.349,255.754 576.349,123.651 444.246,123.651 350,29.405 255.755,123.651 122.96,123.651 122.96,256.446 29.405,350.001 122.96,443.555 122.96,577.041 256.446,577.041 350,670.595 443.554,577.041 576.35,577.041"/>
    </clipPath>

    <g id="LwhyVN.tif" style="clip-path:url(#SVGID_2_);">
      <image style="overflow:visible;" width="1024" height="768" id="Layer_0_1_" xlink:href="http://fc05.deviantart.net/fs13/f/2007/071/9/e/Japanese_shiba_inu__shiba_dog__by_MogamiJ.jpg"  transform="matrix(0.8418 0 0 0.8418 27.5078 37.498)"></image>
    </g>

  </g>
</svg>

This works for me in Safari 6.

Related questions

SVG Linear gradient doesn't work in Safari

I've got an SVG object that contains a linear gradient embedded directly in a document. It works fine in Chrome and Firefox, but in Safari nothing is rendered. If I create the SVG as a file and embed it using …

Read More
SVG changes color when rotated in Safari 10

I've just run into a very weird problem that only shows up in Safari 10. I have playing cards, svg images, that are sometimes rotated using transform:rotate(xdeg). The card I'm using has a red block pattern. When it's not …

Read More
How to produce same result on different browsers when embedding SVG file in HTML code?

I begin to have a solution for my previous question Overlay SVG diagrams on google map. But I have another (smaller) problem. I am using Firefox 3.5 and Safari 4 (on Mac), and when I am embedding SVG in a XHTML, I …

Read More