Home SVG clip-path uses expected coordinates in Firefox, but incorrectly offset in Chrome

Questions

SVG clip-path uses expected coordinates in Firefox, but incorrectly offset in Chrome

August 29, 2023

Here’s a simple SVG with an outlined rectangle with a clip path:

<svg width="100" height="100" viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="-40" y="-40" width="80" height="80" clip-path="path(&quot;M -10 -10 l 20 0 l 0 20 l -20 0 z&quot;)" fill="lightblue" stroke="black"/>
</svg>

https://jsfiddle.net/6aLnuc1h/1/

Important: note that the SVG is centered on 0, 0 (rather than having 0, 0 be in the top left) due to the viewBox. Thus, the rect‘s top left corner is given as -40, -40.

Without the clip path, the SVG looks like this:

The clip path draws a 20×20 square, starting at -10, -10. In Firefox, this works as you’d expect, and it clips out a small square in the middle of the rect:

In Chrome, it seems to still be using the top left as the origin for the clip (instead of the adjusted coordinates per viewBox), and it ends up clipping a square in the top left corner of the rect instead:

I wasn’t able to find any documentation on this behavior or anything stating which behavior is correct/expected. It certainly seems like Firefox is doing it properly. I’m not sure what Chrome is doing here — maybe it’s assuming clip paths’ origins are the top left of the element they clip?

How can I define the clip path such that the browsers agree? I’m not married to one or the other choice, but I’m trying to avoid inspecting the user agent to decide how to define the clip path.

>Solution :

I’m not sure who’s right, according to the specs, the <basic-shape>‘s reference box is supposed to default to border-box, while it seems it defaults to view-box in Firefox, I’m not 100% clear what should that border-box actually map to here.

But anyway, stable Chrome still doesn’t support setting a reference box in clip-path: <basic-shape> <geometry-box>, so you can’t have Firefox’s behavior there, while in Canary with the chrome://flags/#enable-experimental-web-platform-features flag on, you can, even though they still default to the owner SVG’s position:

/* Using CSS as it's clearer */
rect {
  /* In Chrome Canary this will produce the same result as in Firefox */
  clip-path: path("M -10 -10 l 20 0 l 0 20 l -20 0 z") view-box;
}

<svg width="100" height="100" viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg">
   <rect x="-40" y="-40" width="80" height="80" fill="lightblue" stroke="black"/>
</svg>