主页 / user-24916657

Ron's questions

Martin Hope
Ron
Asked: 2024-05-08 02:35:03 +0800 CST
  • 5

我正在尝试“合并”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

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

svg