Chrome中SVG Mask旋转后失效（Firefox与Safari可正常工作）

这个问题属于Chrome对SVG遮罩（mask）坐标空间处理的兼容性问题，严格来说是不符合SVG规范的浏览器行为，具体原因和解决思路如下：

核心原因 #

SVG的mask默认使用maskContentUnits="userSpaceOnUse"，即遮罩内容的坐标基于当前SVG视口的用户空间。当你将旋转transform="rotate(20)"应用到遮罩元素的父容器时：

• Firefox和Safari会正确将父容器的变换纳入遮罩的坐标空间计算，让遮罩跟随元素一起旋转，保持裁剪效果一致；
• Chrome则没有将父容器的变换传递给遮罩的坐标空间，遮罩仍然使用原始视口的坐标，导致旋转后的元素和固定坐标的遮罩不匹配，出现裁剪失效。

你尝试用CSS的transform: rotateZ(20)替代SVG原生transform，问题依旧，是因为Chrome对两种transform的处理逻辑在这个场景下是一致的，都没有将变换传递给遮罩的坐标空间。

修复方案 #

有两种可行的解决思路：

1. 让遮罩与元素同步旋转
   修改mask定义，把旋转逻辑加到遮罩内容上，确保遮罩和目标元素的变换一致：

   <mask id="57656">
       <g transform="rotate(20)">
           <rect fill="black" x="-250" y="-300" width="500" height="600"></rect>
           <rect fill="white" x="-72" y="-141" width="235" height="287"></rect>
       </g>
   </mask>
   

2. 使用相对坐标的遮罩单位
   将mask的maskContentUnits设置为objectBoundingBox，让遮罩基于应用它的元素的边界框定位，自动跟随元素变换：

   <mask id="57656" maskContentUnits="objectBoundingBox">
       <rect fill="black" x="0" y="0" width="1" height="1"></rect>
       <!-- 坐标需转换为元素边界框的相对比例值 -->
       <rect fill="white" x="0.31" y="0.27" width="0.47" height="0.57"></rect>
   </mask>
   

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