xml - SVG:将掩码应用于路径组 标记

Question

我在将 <mask> 层应用于 <g> 路径组时遇到问题。

当我将我的 <mask> 应用到 <rect> 时，它​​按预期工作，但是当在 <g> 上使用它时，整个组都消失了。

这是我的文档

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="600px" height="600px" viewBox="0 0 600.000000 600.000000" preserveAspectRatio="xMidYMid meet">

     <defs>
        <mask id="myMask" maskUnits="userSpaceOnUse" x="0" y="0" width="600" height="600">
            <rect fill="white" x="0" y="0" width="600" height="600"></rect>
            <circle cx="30" cy="30" r="20" fill="black"></circle>
            <circle cx="300" cy="300" r="200" fill="black"></circle>
        </mask>
     </defs>

     <rect fill="#FFFFFF" width="21456" height="21456" mask="url(#myMask)"></rect>

     <g transform="translate(0.000000,600.000000) scale(0.100000,-0.100000)" fill="#100059" stroke="none" mask="url(#myMask)"> <!-- a bunch of <path>s --> </g>

     <g transform="translate(0.000000,600.000000) scale(0.100000,-0.100000)" fill="#f542b3" stroke="none"> <!-- a bunch of <path>s --> </g>

</svg>

我也尝试过使用 clip-path 的类似方法，结果相同 - 使用 <rect> 但不使用 <g>。我还尝试将 mask 属性应用于具有相同结果的单个 <path> 元素

感谢任何帮助

Answer 1

我严重怀疑这个问题是否仍然有效，但我想我还是会在这里为其他任何人提供答案。

要同时屏蔽一组元素，请将它们全部包含在 <g></g> 中堵塞。然后你有几个选择:

Easy Style: 设置所有元素的不透明度

如果您对整个组的不透明度或其他转换感到满意，请提供 <g></g>元素类或 ID，并相应地设置 CSS:

<g id="someGroup" class="class1 class2">
  <path ...></path>
  <circle ...></circle>
  <whatever ...></whatever>
</g>

和 CSS(可能不在一起，但你明白了):

g,
#someGroup,
.class1,
.class2 {
    opacity: 0.5;
}

不太容易:设置一个掩码并应用于组(OP 问题)

首先，您必须在 <defs></defs> 中设置掩码使用 ID block ，然后将其应用于组。一个例子:

<mask id="easyMask" x="0" y="0" width="1" height="1"
    maskContentUnits="objectBoundingBox">
    <rect x="0" y="0" width="1" height="1"
        style="fill-opacity: 0.25; fill: white;"/>
</mask>

我不会解释屏蔽元素，因为 OP 似乎已经知道了。但是，要获得详尽的指南，请前往 here并阅读。无论如何，一旦你在 defs 中设置了你的掩码，就可以将它应用到组中:

<g style="mask: url(#easyMask);">
  <path ...></path>
  <circle ...></circle>
  <whatever ...></whatever>
</g>

其中最重要的部分是样式元素 style="mask: url(#easyMask);"它实际上应用了面具。它适用于 g 的所有子元素团体。只需更换 #easyMask使用您的面具 ID，您就可以开始了!还没有尝试过使用任何其他选择器(如 .class1 或其他)，但 # 的存在似乎表明是 CSS 样式的选择器。做个实验 :-)