SVG 遮罩不适用于应用变换

Question

我正在尝试将蒙版应用于转换后的 svg 元素（它已简化，我正在尝试使用路径来实现，但结构是相同的）。如果将掩码应用于转换组之外的元素，则它会按预期工作。如果我尝试在内部做同样的事情，元素就会消失。

HTML：

<svg width="350pt" height="100pt" >
  <defs>
    <pattern id="circleFill" patternUnits="userSpaceOnUse" width="5" height="5" > 
      <circle cx="2" cy="2" r="2" fill="red"></circle>
    </pattern>
    <mask id="circleMask">
      <rect x="0" y="0" width="100%" height="100%" fill="url(#circleFill)" />
    </mask>
  </defs>

  <g transform="translate(0,150) scale(.1,-.1)">
    <rect class="holder" x="300" y="300" height="1000" width="1000"/>
    <rect class="main t" x="350" y="350" height="400" width="400" />
  </g>
  <rect x="300" y="50" height="50" width="50" class="main masked o" />
</svg>

CSS：

.holder {
    fill: darkgray;
    stroke: black;
    stroke-width: 2px;
}

.o{ fill: red; }
.t{ fill: purple; }
.masked{ mask: url(#circleMask); }

如果我将“masked”类添加到第二个矩形（带有类“main t”），它就会消失。

以下结构有效：

<g class="masked">
  <g transform="...">
    <rect ... />
  </g>
</g>

我无法使用它，因为图像中有超过 50 个元素应该具有相同的变换，并且只有其中一些元素应该被遮罩（并且有 5 个不同的遮罩）。

这是小提琴：小提琴

我做错了什么？是否可以屏蔽转换组内的元素？

Answer 1

将遮罩应用于转换后的 SVG 元素时遇到的问题与 SVG 处理遮罩和转换的方式有关。 SVG 规范规定 mask-image 属性不受变换属性影响

因此，当您对包含屏蔽元素的组应用变换时，将不再应用屏蔽。 为了解决这个问题，你可以使用 mask-position 属性，它允许你指定遮罩图像相对于被遮罩元素的位置。通过将 mask-position 属性设置为与变换后的元素相同的位置，可以确保正确应用遮罩。

如果要将遮罩应用于已转换且具有 viewBox 的元素（您添加显式 viewBox），则可以将 mask-position 属性与 viewBox 结合使用。 viewBox 属性指定用户空间中的一个矩形，该矩形应映射到 SVG 视口的边界。 viewBox 属性的值是变换前的坐标，但应该渲染和遵守变换后的坐标。

如果图像中的元素超过 50 个，并且想要对其中一些元素应用蒙版，则可以使用相同的方法。只需确保将 mask-position 属性设置为与每个蒙版元素的转换元素相同的位置即可。