SVG 剪辑路径在 Firefox 中使用预期坐标，但在 Chrome 中偏移不正确

Answer 1

规格

，<basic-shape>的

参考框

应该默认为border-box，而在Firefox中似乎默认为

view-box

，我认为（虽然我可能是错的），那个

border-box

确实会映射到这里的所有者

<svg>

（？）。但是稳定的 Chrome 仍然不支持在

clip-path: <basic-shape> <geometry-box>

中设置参考框，因此你不能在那里拥有 Firefox 的行为，在 Canary 中你可以：

/* 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>

非常奇怪的一件事是 Firefox 永远不会产生 Chrome 的结果，即使它们显然支持设置

<geometry-box>

。