例如，如果你具有由圆形和矩形，两者的轮廓的一个简单的“间谍玻璃”形状部分透明的，你能停止不透明度有效降低正在其中两个形状重叠？
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
你可以看到 ，添加过滤器让背景彪炳所以用恒定强度地说。 然而，该形状的颜色变得苍白，更浅灰色外观（除非两种颜色是相同的）。 也许你可以用一个妥协去，用略少减少alpha值tableValues属性像0 .5 .75而不是0 .5 .5 。
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>
文章来源: If two partially opaque shapes overlap, can I show only one shape where they overlap?
