Search code examples
cssgoogle-chromesvgclip-path

How to make SVG clip-path work correctly in Google Chrome?

I'm using an inline SVG together with CSS clip-path property to create a beveled corner on a div element.

On Firefox, the size of the beveled corner is correct. However, on Google Chrome, not only the size of the beveled corner is incorrectly smaller, but the size of the div element also become incorrectly smaller.

Here is the demo on jsFiddle.

How do I make Google Chrome works correctly with SVG and clip-path?

P.S. I know CSS generated content can simulate the beveled corner effect. But in my case, I have to use SVG and clip-path.

Solution

  • I had found the solution in this article. The solution is adding clipPathUnits="objectBoundingBox" to the clipPath element, and then change the value of the points attribute of the polygon element to percentage value.

    Here is the updated demo on jsFiddle.

    The previous problem was that Google Chrome incorrectly applies the clipping path to the document instead of the HTML element that references it. According to the aforementioned article, setting the value of the clipPathUnits attribute to objectBoundingBox makes the clipping path honors the boundaries of the HTML element that references it.