SVG：将掩码应用于路径组<g>标记

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> 

我用夹路径具有相同的结果也尝试了类似的方法 - 用<rect>但不<g>工作。我也尝试运用mask财产个别<path>元素具有相同的结果

任何帮助表示赞赏

Answer 1

我狠狠怀疑这个问题是否仍然有效，但我想我会把答案在这里，无论如何，为其他人。

要同时屏蔽一组元素，将它们全部包含在<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问题）

首先，你必须建立在<defs></defs>块面膜用ID，然后将其应用到组。举例：

<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样式的选择器。有一个实验:-)