应用SVG遮罩后圆形边缘被截断的问题求助

当SVG元素应用遮罩（mask）时，默认的maskUnits属性值为objectBoundingBox，这意味着遮罩元素的大小和位置是基于被遮罩元素的几何边界盒（即元素自身的图形范围，不包含描边扩展部分）来计算的。

以第一个圆形为例：

• 圆形的几何边界盒是cx±r（10_{50）、`cy±r`（20}60），宽高均为40
• 描边宽度为12，描边会向几何边界盒外扩展6单位，导致描边外边缘超出了遮罩元素的范围
• 遮罩中只有几何边界盒范围内的区域是白色（显示内容），超出部分为透明（隐藏内容），因此描边的边缘被截断

而第二、第三个圆形：

• 第二个圆形半径增大到26，几何边界盒扩展为64_116、1466，描边扩展的6单位完全处于遮罩覆盖范围内
• 第三个圆形描边宽度减小到8，扩展4单位，完全包含在几何边界盒的遮罩范围内，因此显示正常

只需将遮罩的maskUnits属性设置为userSpaceOnUse，让遮罩的大小和位置基于SVG全局坐标系统，而非被遮罩元素的几何边界盒，这样遮罩会覆盖整个SVG区域，所有描边部分都能正常显示：

修改后的SVG代码：

<svg viewBox="0 0 180 80" xmlns="http://www.w3.org/2000/svg" stroke="black" fill="none">
  <defs>
    <mask id="mask01" maskUnits="userSpaceOnUse">
      <rect width="180" height="80" fill="white"/>
    </mask>
  </defs>
  <circle mask="url(#mask01)" cx="30" cy="40" r="20" stroke-width="12" />
  <circle mask="url(#mask01)" cx="90" cy="40" r="26" stroke-width="12" />
  <circle mask="url(#mask01)" cx="150" cy="40" r="20" stroke-width="8" />
</svg>

如果需要针对单个元素调整遮罩范围，也可以通过修改遮罩元素的x、y、width、height属性（配合maskUnits="objectBoundingBox"）来扩展遮罩区域，例如：

<mask id="mask01" maskUnits="objectBoundingBox" x="-0.3" y="-0.3" width="1.6" height="1.6">
  <rect width="180" height="80" fill="white"/>
</mask>

这里的-0.3和1.6是根据描边扩展比例计算得出（描边扩展6单位，占圆形半径20的30%），确保遮罩范围覆盖描边的全部区域。

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