How to apply SVG clipPath to HTML element that is not in the top left corner of document in webkit browsers

HTML & CSS
1

I have defined an SVG clipPath and am applying it to a few DIVs on my page. It works/displays as expected in FF, but in Chrome and Safari (all latest versions), it seems that the clipPath will only affect an HTML element if the HTML element is positioned in the top-left corner of the page.

SVG Object

<svg height="0" width="0">
    <defs>
        <clipPath id="clip">
            <path fill="#000000" d="M0,0.01c3.472,1.088,6.688,3.663,7.878,9.208c1.604,7.482,4.305,11.862,7.102,11.79v0.003
        c0.007,0.001,0.014-0.001,0.02-0.001c0.007,0,0.014,0.002,0.021,0.001v-0.003c2.797,0.072,5.499-4.308,7.103-11.79
        C23.312,3.672,26.527,1.098,30,0.01H0z"/>
        </clipPath>
    </defs>
</svg>

CSS for element to be clipped

.clipMe {
    background: red;
    width: 30px;
    height: 21px;
    clip-path: url(#clip);
    -webkit-clip-path: url(#clip);
}

JSFIDDLE

I believe this article begins to address this by use of coordinate systems, but I got lost/confused very quickly several times. It sounds like it’s saying that using different units of measurements and coordinates, it’s possible to apply a clipPath to any HTML element… but I’m really not sure.

I exported my clipPath from Illustrator so if there were different units/coordinates that need to be used, I’m not sure how I’d go about doing it.

In Chrome and/or Safari, has anyone successfully applied an SVG clipPath (that was an actual path - not a polygon or ellipse) to an HTML element located somewhere other than the top left of the page?

2

As far as I can see it doesn’t seem to be fully supported yet in webkit.

None of the demos that I’ve seen work if the element is anywhere but in the top left of the viewport.

3

Please read the comment made by “Amelia BR” where she addresses positioning.

4

Amelia’s example is actually working in Firefox which she fails to notice but does not work in webkit. I believe in webkit it’s not supported properly and what you are seeing is the svg itself in the top left of the viewport and the element it is applied to must match that position (a bit like background-attachment fixed I suppose).

Support for clip-path (url#) is documented here as Firefox only.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.