主页 / coding / 问题 / 78444470
Accepted
Ron
Asked: 2024-05-08 02:35:03 +0800 CST

如何合并 SVG 蒙版？

  • 772

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

1 个回答

  1. Best Answer

    您可以将两个蒙版合并为一个蒙版。

    <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>

    • 0

相关问题