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

问题

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?

回答1:

I think PaulOB's responses over at SitePoint wraps this issue up pretty nicely. Long story short: support for applying an SVG clipPath to an HTML element is not quite there for webkit browsers yet.

回答2:

while I was looking for the answer to this question I came across your question. I found all of the answers including the: "you just can't" answer to be a little bit of a cop out.

I kept trying, and what I found is this:

When you have an svg clipPath it is not position-able as far as what I can tell, BUT if you take into account that you can toss it into an iframe and then position the iframe, you're golden.

I am including a link, and I am not sure how long it will be in place before it 'explodes' because I am not the owner of the server.

example

The contents of that link are fairly self explanatory, and if it's not up anymore then message me or respond to this post and I will put an update on my own server somewhere.

回答3:

The issue in Chrome and Opera has just been fixed and will roll out in the next few weeks. The browser was indeed always applying a reference clip at the page origin. The new behavior should match Firefox.

来源：https://stackoverflow.com/questions/29873989/how-to-apply-svg-clippath-to-html-element-that-is-not-in-the-top-left-corner-of

标签

css

svg

clip-path