如果两个部分不透明的形状重叠，我可以只显示它们重叠的一个形状吗？答案

【问题标题】：If two partially opaque shapes overlap, can I show only one shape where they overlap?如果两个部分不透明的形状重叠，我可以只显示它们重叠的一个形状吗？
【发布时间】：2013-01-01 10:31:22
【问题描述】：

例如，如果您有一个由圆形和矩形组成的简单“间谍玻璃”形状，并且两者的轮廓都是部分透明的，您能否有效地阻止两个形状重叠的不透明度降低？

【问题讨论】：

您的意思是两种不透明度都不会“相加”，从而使重叠区域中的背景不太明显？
是的，这就是我想要达到的目的。如果我不清楚的话，我确实很难考虑如何措辞。

标签： svg opacity

【解决方案1】：

您可以使用过滤器来调整不透明度值。比如说，两个形状的不透明度值都是 0.5，那么您想让两个形状重叠的区域也具有 0.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 而不是0 .5 .5）稍微降低alpha 值。

【讨论】：

【解决方案2】：

如果将形状构造为单个 SVG path 元素，则重叠不会叠加成更暗的结果。

如果形状由多个 SVG 元素构成，则重叠确实会产生更暗的结果。

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="300px">
<!-- No summing here -->
<g>
    <path d="M10,10 L100,100 M10,100 L100,10" style="stroke: #000000; stroke-width: 10px; opacity: 0.5" />
</g>
<!-- Summing here -->
<g>
    <path d="M200,200 L290,290" style="stroke: #000000; stroke-width: 10px; opacity: 0.5" />
    <path d="M200,290 L290,200" style="stroke: #000000; stroke-width: 10px; opacity: 0.5" />
</g>
</svg>

【讨论】：