如何合并SVG蒙版？

Question

我正在尝试“合并”SVG 中的两个蒙版，并以两个蒙版的白色部分在我应用的形状中可见的方式应用它们。

我读到解决方案可能是 feComposite，但我无法让它工作......这就是我到目前为止所拥有的：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="mask1" x="0" y="0" width="200" height="200">
      <rect x="0" y="0" width="200" height="200" fill="black"/>
      <rect x="0" y="0" width="100" height="100" fill="white"/>
    </mask>
    <mask id="mask2" x="0" y="0" width="200" height="200">
      <rect x="0" y="0" width="200" height="200" fill="black"/>
      <rect x="100" y="100" width="100" height="100" fill="white"/>
    </mask>
    <filter id="combinedMask">
            <feComposite in="mask1" in2="mask2" operator="over"/>
    </filter>
  </defs>
  
  <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#combinedMask)"/>
</svg

上述情况下所需的输出是这样的： 输出

Answer 1

您可以将两个面具合并在一个面具中。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="mask1" x="0" y="0" width="200" height="200">
      <rect x="0" y="0" width="100" height="100" fill="white"/>
    </mask>
    <mask id="mask2" x="0" y="0" width="200" height="200">
      <rect x="100" y="100" width="100" height="100" fill="white"/>
    </mask>
    <mask id="combinedMask" x="0" y="0" width="200" height="200">
      <rect width="200" height="200" fill="white" mask="url(#mask1)"/>
      <rect width="200" height="200" fill="white" mask="url(#mask2)"/>
    </mask>
  </defs>
  <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#combinedMask)"/>
</svg>