8

我无法将<mask>图层应用到<g>路径组。

当我将 my<mask>应用于 a<rect>时，它按预期工作，但在 a 上使用它时<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>

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

任何帮助表示赞赏

4

1 回答 1

8

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

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

简单样式：在所有元素上设置不透明度

如果您对整个组的不透明度或其他转换感到满意，请给<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 问题）

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

<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 似乎已经知道这一点。但是，要获得详尽的指南，请前往此处阅读。无论如何，一旦你在 defs 中设置了你的掩码，就将它应用到组中：

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

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

于 2013-04-16T13:20:34.873 回答