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

You can see添加滤镜让背景闪耀，以恒定的强度说出来。然而，形状的颜色变得更淡，更灰色（除非两种颜色相同）。也许您可以妥协，使用tableValues属性（例如0 .5 .75而不是0 .5 .5）将alpha值略微降低。

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

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

2 个答案: