Clipping Path In Svg Not Working In Safari

October 26, 2023 Post a Comment

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 S

Solution 1:

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

<svgversion="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><clipPathid="SVGID_2_"><polygonid="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><gid="LwhyVN.tif"style="clip-path:url(#SVGID_2_);"><imagestyle="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.

Solution 2:

Also watch out if you have a base tag in your html as safari apparently adds the base to the id selector.

Solution 3:

Safari isn't a huge fan of clipPaths in SVG. Instead, it works perfectly when embedded within an old-school <Object> element. In order to do that though, I needed to make use of PHP headers to define the correct Content-type which is application/xhtml+xml. Without it,all that is served is text/html, where Safari (and older versions of modern browsers) will not display SVG.

In order to use PHP with SVG, I needed to add two additions to my webservers config file. In Apache, I added the type psvg to my mime-type file so that the releveant line reads like: image/svg+xml svg svgz psvg

Next, I had to add an additional SVG-handler in the Apache config file, so that the relevant line reads like: AddType application/x-httpd-php .php .php4 .phtml .psvg so that any .psvg file is rendered as PHP.

So I created a new file called faces.psvg, and it looks like this:

<?php
    header("Content-type: image/svg+xml");
    print('<?xml version="1.0" encoding="iso-8859-1"?>');
?>
<svg version="1.1"> //your svg file data </svg>

I then created a new .php file called index.php, and it looks like this:

<html><head><metahttp-equiv="content-type"content="application/xhtml+xml; charset=utf-8" /></head><body><objecttype="image/svg+xml"data="faces.psvg"width="1120"height="800"></object></body></html>

and voilá, working svg clipping masks everywhere, even Mobile Safari.

Solution 4:

I managed to fix this, used a :before and applied the clip and colour to that:

.field_captioned_carousel.teaser>.teasertextbg:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    -webkit-clip-path: polygon(70px0%,100%0,100%100%,0100%,070px);
    clip-path: polygon(50px0%,100%0,100%100%,0100%,050px);
    background-color:#ff0000;
}

Solution 5:

You should wrap the clipPath element inside a defs element:

<defs><clipPath></clipPath></defs>

Html5 Guide