CODEWITHSUNDEEP
htmlcsssvg
priyanka
priyanka

Reputation: 99

SVG clip paths only work in firefox-- not chrome or safari?

I basically have two triangles that come together to make a rectangle (the height and width of the browser screen.

To do this I created two SVGs to apply to two divs.

However, this only works in firefox for some reason. When I try and view it in safari and chrome, the divs are hidden.

Please help! Why is this happening?

SVG 1:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
    <filter id="blur" x="0%" y="0%" width="100%" height="100%">
        <feGaussianBlur stdDeviation="30" />
        <feColorMatrix type="saturate" values="2" />
    </filter>
    <filter id="unblur">
        <feGaussianBlur stdDeviation="0" />
        <feColorMatrix type="saturate" values="3" />
    </filter>
</defs>
<clipPath id="svgClip" clipPathUnits="objectBoundingBox">
    <path id="svgPath" d="M0,0 L1,0 0,1z"/>
</clipPath>
<path id="svgMask" d="M0,0 L1,0 0,1z"  />
</svg>

SVG 2:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
    <filter id="blur2" x="0%" y="0%" width="100%" height="100%">
        <feGaussianBlur stdDeviation="30" />
        <feColorMatrix type="saturate" values="2" />
    </filter>
    <filter id="unblur2">
        <feGaussianBlur stdDeviation="0" />
        <feColorMatrix type="saturate" values="3" />
    </filter>
    <clipPath id="svgClip2" clipPathUnits="objectBoundingBox">
    <polygon points="0 1 1 0 1 1"/>
</clipPath>
</defs>
</svg>

CSS:

#top, #bottom{
    background: url(img/1.JPG) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    width: 100%;
    position:absolute;
    top:0px;
    left:0px;
    z-index: 2;}
#top{
    -webkit-clip-path: url(clip.svg#svgClip);
    -moz-clip-path: url(clip.svg#svgClip);
    -o-clip-path: url(clip.svg#svgClip);
    clip-path: url(clip.svg#svgClip);
    filter: url(clip.svg#blur);}
#bottom{
    -webkit-clip-path: url(clip2.svg#svgClip2);
    -moz-clip-path: url(clip2.svg#svgClip2);
    -o-clip-path: url(clip2.svg#svgClip2);
    clip-path: url(clip2.svg#svgClip2);
    filter: url(clip2.svg#blur2);}

HTML:

<div class="top"></div>
<div class="bottom"></div>

Thanks for the help in advance!

Upvotes: 1

Views: 1172

Answers (1)

Robert Longson
Robert Longson

Reputation: 124039

In Firefox SVG clip-paths can be applied to both html and SVG elements, this is an extension to the SVG and html specifications.

Chrome/Safari and other UAs can only currently be apply clip-paths to SVG elements. I expect that other UAs will support clipping non-SVG content at some point but I don't know when.

I suppose what you could do for non-firefox browsers is embed the <div> in an <svg><foreignObject></foreignObject></svg> wrapper and clip the <foreignObject> element.

Upvotes: 1

Related Questions