Question

我试图制作一个SVG图像，其中我使用一组形状作为另一组的面具。

基本上我想要一组透明的形状，覆盖更大的形状并剪裁它，这样你就可以通过它们看到页面背景（因为它们是透明的）但不是更大的形状的填充或描边

我尝试将遮罩应用到具有指向#overlays组标签的大形状，但它似乎不起作用。指向一个单独的叠加层可以工作，但我不想为每个叠加层添加。

Codepen：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通道来确定遮罩的不透明度（黑色是剪裁的，左边是白色的）。

因此，为了避免红色掩码的半透明，并且因为您无法更改fill中复制的<g>元素的已设置<use>属性，您必须在<defs>和文档中链接<g> <mask>，不带属性，然后设置各自的属性：

真的透明：

＆＃13;

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

＆＃13;

<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>

＆＃13;

半透明：

＆＃13;

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

＆＃13;

<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>

＆＃13;

普通视图中显示

<use xlink:href="#overlays" fill="black" fill-opacity="1"> ：
（仍为红色半透明）

＆＃13;

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

＆＃13;

<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>

＆＃13;

SVG：使用组作为掩码

1 个答案: