SVG clip-path在Firefox坐标正常，Chrome偏移异常的兼容问题

问题场景 #

以下SVG通过viewBox将坐标系原点设在画布中心，期望用clip-path裁剪出矩形中间的20x20小正方形，但Chrome和Firefox表现不一致：

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

• Firefox：遵循viewBox定义的全局坐标系，正确裁剪出中间的小正方形
• Chrome：错误使用元素自身的局部坐标系，裁剪出矩形左上角的小正方形

兼容方案 #

使用<clipPath>元素并明确设置clipPathUnits="userSpaceOnUse"，强制裁剪路径使用SVG的全局用户坐标系，消除浏览器差异：

<svg width="100" height="100" viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="centerClip" clipPathUnits="userSpaceOnUse">
      <path d="M -10 -10 l 20 0 l 0 20 l -20 0 z" />
    </clipPath>
  </defs>
  <rect x="-40" y="-40" width="80" height="80" clip-path="url(#centerClip)" fill="lightblue" stroke="black"/>
</svg>

原理说明 #

默认情况下，clipPath的clipPathUnits属性值为objectBoundingBox，裁剪路径会基于元素的边界盒坐标系计算。而设置clipPathUnits="userSpaceOnUse"后，裁剪路径会直接使用SVG全局的用户坐标系（即viewBox定义的坐标系），确保所有浏览器按统一规则解析裁剪区域。

内容的提问来源于stack exchange，提问作者skelley