css - SVG:使用组作为 mask

Question

我正在尝试制作一个 SVG 图像，其中我使用一组形状作为另一组形状的 mask 。

基本上我想要一组透明形状覆盖一个更大的形状并对其进行剪辑，这样您就可以通过它们看到页面背景(因为它们是透明的)但看不到更大形状的填充或描边。

我尝试对带有指向#overlays 组的标签的大形状应用蒙版，但它似乎不起作用。将

代码笔:http://codepen.io/nathancox/pen/YPgZPR?editors=110

顶部的形状是 SVG，底部的是我试图让它完成的图像。

这是 SVG:

<svg>
  <defs>
    <mask id="clip-behind" >
        <rect id="bg" x="0" y="0" width="100%" height="100%" fill="white"/>
        <use  xlink:href="#overlays" fill='black' fill-opacity='1' />
    </mask>
  </defs>

  <rect
     mask="url(#clip-behind)"
     width="260" height="270"  x="50" y="50"
     fill='none' stroke-opacity='1' stroke='black' stroke-width='4'
   />

  <g id="overlays" fill='red' fill-opacity='0.25' stroke-opacity='1' stroke='red'>
    <rect id='overlay1' width="80"  height="80" x="280" y="150" />
    <rect id='overlay2' width="50" height="50" x="140" y="300" />
  </g>
</svg>

有人知道我做错了什么，或者是否有更好的方法？

Answer 1

你不能这样做，<mask>使用 alpha channel 来确定 mask 的不透明度(黑色被剪裁，白色左侧)。

所以为了避免红色 mask 的半透明，并且因为你不能改变已经设置的fill <g> 中包含的元素的属性用 <use> 复制，您必须在 <defs> 中链接一个<g> ，没有属性，在 <mask> 中然后在文档中设置各自的属性:

---

真正透明 :

body {
  background-color: #fff;
  background-image: linear-gradient(#eee 0.1em, transparent 0.1em);
  background-size: 100% 1.2em;
}
svg {
  width: 400px;
  height: 400px;
}

<div id='container'>
  <svg>
    <defs>
      <g id="overlays">
        <rect id='overlay1' width="80" height="80" x="280" y="150" />
        <rect id='overlay2' width="50" height="50" x="140" y="300" />
      </g>
      <mask id="clip-behind">
        <rect id="bg" x="0" y="0" width="100%" height="100%" fill="white" />
        <use xlink:href="#overlays"/>
      </mask>
    </defs>
    <rect mask="url(#clip-behind)" width="260" height="270" x="50" y="50" fill='none' stroke-opacity='1' stroke='black' stroke-width='4' />
    <use xlink:href="#overlays" fill='red' fill-opacity='0.25' stroke-opacity='1' stroke='red' />
  </svg>

  <img src='https://dl.dropboxusercontent.com/u/587097/desired.png' />

</div>

---

半透明 :

body {
  background-color: #fff;
  background-image: linear-gradient(#eee 0.1em, transparent 0.1em);
  background-size: 100% 1.2em;
}
svg {
  width: 400px;
  height: 400px;
}

<div id='container'>
  <svg>
    <defs>
      <mask id="clip-behind">
         <rect id="bg" x="0" y="0" width="100%" height="100%" fill="white" />
        <!-- changed the fill-opacity to make it more obvious -->
        <g id="overlays" fill='red' fill-opacity='0.8' stroke-opacity='1' stroke='red'>
        <rect id='overlay1' width="80" height="80" x="280" y="150" />
        <rect id='overlay2' width="50" height="50" x="140" y="300" />
    </g>
      </mask>
    </defs>
   
    <rect mask="url(#clip-behind)" width="260" height="270" x="50" y="50" fill='none' stroke-opacity='1' stroke='black' stroke-width='4' />
    
  </svg>
</div>

---

<use xlink:href="#overlays" fill="black" fill-opacity="1"> 在普通 View 中显示 :
(仍然是红色半透明)

body {
  background-color: #fff;
  background-image: linear-gradient(#eee 0.1em, transparent 0.1em);
  background-size: 100% 1.2em;
}
svg {
  width: 400px;
  height: 400px;
}

<div id='container'>
  <svg>
    <defs>
      <g id="overlays" fill='red' fill-opacity='0.25' stroke-opacity='1' stroke='red'>
        <rect id='overlay1' width="80" height="80" x="280" y="150" />
        <rect id='overlay2' width="50" height="50" x="140" y="300" />
      </g>
    </defs>
    <rect width="260" height="270" x="50" y="50" fill='none' stroke-opacity='1' stroke='black' stroke-width='4' />

    <use xlink:href="#overlays" fill="black" fill-opacity="1" />

  </svg>
</div>