svg - 如果两个部分不透明的形状重叠，我可以在它们重叠的地方只显示一个形状吗？

Question

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

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

Answer 2

如果将形状构造为单个 SVGpath元素，则重叠不会产生更暗的结果。

如果形状是由多个 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>