如果两个部分不透明的形状重叠,我可以只显示一个重叠的形状吗？

Question

例如,如果您有一个由圆形和矩形组成的简单"间谍玻璃"形状,并且两者的轮廓都是部分透明的,那么在两个形状重叠的地方,您能否有效地减少不透明度？

Answer 1

您可以使用过滤器调整不透明度值.比如,两个形状的不透明度值都为.5,那么你想要使两个重叠的区域的不透明度值都为.5.

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="300px">
  <filter id="constantOpacity">
    <feComponentTransfer>
      <!-- This transfer function leaves all alpha values of the unfiltered
           graphics that are lower than .5 at their original values.
           All higher alpha above will be changed to .5.
           These calculations are derived from the values in
           the tableValues attribute using linear interpolation. -->
      <feFuncA type="table" tableValues="0 .5 .5" />
    </feComponentTransfer>
  </filter>

  <line x2="300" y2="300" stroke="black" stroke-width="10"/>
  <path d="M0 150h300" stroke="blue" stroke-width="10"/>
  <g filter="url(#constantOpacity)">
    <rect x="50" y="50" width="150" height="150" opacity=".5" fill="green" id="rect1"/>
    <rect width="150" height="150" opacity=".5" fill="red" id="rect2"
          x="100" y="100"/>
  </g>
</svg

您可以看到添加过滤器让背景闪耀,以便以恒定的强度说出来.然而,形状的颜色变得更淡,更灰色(除非两种颜色相同).也许你可以妥协,用一个tableValues属性0 .5 .75来减少alpha值,而不是0 .5 .5.