svg - 部分的に不透明な 2 つの図形が重なっている場合、重なっている部分で 1 つの図形だけを表示できますか?

Question

たとえば、円と長方形で構成された単純な「スパイ グラス」形状があり、両方の輪郭が部分的に透明である場合、2 つの形状が重なる部分で不透明度が効果的に減少するのを止めることができますか?

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 .750 .5 .5

Answer 2

シェイプが 1 つの 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>