为何使用objectBoundingBox时Clip Path旋转未按预期生效？

核心原因在于：当<clipPath>设置clipPathUnits="objectBoundingBox"时，其自身的transform属性使用的是SVG的用户空间坐标系（即绝对像素坐标体系），而非objectBoundingBox对应的0-1相对坐标系。

你写的transform="rotate(20 0.5 0.5)"里，旋转中心0.5 0.5是绝对坐标的0.5px位置（几乎在SVG原点），而非被裁剪元素边界框的中心，这就是实际效果不符合预期的根源。

而你期望的transform="rotate(20 50 50)"是基于绝对坐标的旋转，对应被裁剪元素（假设是100x100的正方形）的中心位置。要在objectBoundingBox模式下实现相同效果，需要把旋转变换应用到<clipPath>内部的图形元素上，而非<clipPath>自身：

<!-- 错误用法：transform加在clipPath上，旋转中心为绝对坐标0.5,0.5 -->
<clipPath id="clipWrong" clipPathUnits="objectBoundingBox" transform="rotate(20 0.5 0.5)">
  <rect x="0.25" y="0.25" width="0.5" height="0.5" />
</clipPath>

<!-- 正确用法：transform加在内部图形上，旋转中心为objectBoundingBox的0.5,0.5（即被裁剪元素中心） -->
<clipPath id="clipRight" clipPathUnits="objectBoundingBox">
  <rect x="0.25" y="0.25" width="0.5" height="0.5" transform="rotate(20 0.5 0.5)" />
</clipPath>

此时内部元素的旋转中心0.5 0.5就对应被裁剪元素边界框的50%位置，和绝对坐标下rotate(20 50 50)（当被裁剪元素尺寸为100x100时）的效果完全一致。

关键总结 #

• <clipPath>自身的transform始终基于SVG用户空间（绝对坐标），不受clipPathUnits参数影响
• 要在objectBoundingBox模式下基于被裁剪元素中心做变换，需将变换应用到<clipPath>内部的图形元素上

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