如果蒙版是单色的，我知道如何使用 SVG 蒙版将蒙版完全“剪切”成另一种形状。
如何使用多色 SVG 定义 X 作为遮罩，以便 X 的外部形状定义要切掉的“孔”？
以下三张图片说明了我想要实现的目标：
svg #2 on which the outer shape of #1 should be used as a cut-out
按照@enxaneta 的建议创建形状的白色填充版本不适用于我的问题，因为我有许多“复杂”的外部 SVG 定义，我不想更改其中的每一个。
还有其他更简单的方法来实现我想要的吗？
【问题讨论】：
标签： javascript html svg mask
您需要定义没有填充的路径。然后你使用你的路径作为蒙版并用白色填充它们。要绘制图像，请使用您选择的颜色填充这些路径。
svg{border:1px solid; width:49vw}
svg:nth-child(2){background:red;}
mask use{fill:white;}<svg viewBox="0 0 100 50">
<defs>
<polygon id="a" points="30,5 70,20 75,40 20,20" />
<circle id="b" cx="50" cy="25" r="15" />
<circle id="c" cx="60" cy="35" r="10" />
<mask id="m">
<use xlink:href="#a"/>
<use xlink:href="#b"/>
<use xlink:href="#c"/>
</mask>
</defs>
<g id="complexShape">
<use xlink:href="#a" fill="lightblue" />
<use xlink:href="#b" fill="gold"/>
<use xlink:href="#c" fill="red"/>
</g>
</svg>
<svg viewBox="0 0 100 50">
<rect width="100" height="50" style="mask: url(#m)" />
</svg>【讨论】：
蒙版的颜色决定了蒙版对象在该点的最终不透明度。遮罩颜色的 R、G、B 和 A 分量组合在一个公式中以确定用于设置遮罩将成为该点的最终透明度的亮度值。因此，例如，如果蒙版是红色的，则最终蒙版的结果将是半透明的。
没有办法使彩色对象成为实心（非半透明）蒙版。只有全白才能做到这一点。
更新
假设您有一个如下所示的外部 SVG 图像：
<svg viewBox="0 0 100 50">
<polygon id="a" points="30,5 70,20 75,40 20,20" fill="lightblue"/>
<circle id="b" cx="50" cy="25" r="15" fill="gold"/>
<circle id="c" cx="60" cy="35" r="10" fill="red" stroke="blue" stroke-width="4"/>
</svg>您可以通过在 SVG 的开头添加三行来将其转换为“掩码”版本。
<svg viewBox="0 0 100 50">
<filter id="blacken"><feFlood flood-color="black"/><feComposite operator="in" in2="SourceGraphic"/></filter>
<style>svg :not(#maskbg) { filter: url(#blacken); }</style>
<rect id="maskbg" x="-100%" y="-100%" width="300%" height="300%" fill="white"/>
<polygon id="a" points="30,5 70,20 75,40 20,20" fill="lightblue"/>
<circle id="b" cx="50" cy="25" r="15" fill="gold"/>
<circle id="c" cx="60" cy="35" r="10" fill="red" stroke="blue" stroke-width="4"/>
</svg>这是很容易编写脚本的。这种方法应该适用于几乎所有的 SVG。
构建完所有掩码变体后，您可以使用mask-image 应用它们。
【讨论】：