SVGフィルタは、不透明領域にのみフィルタを適用します。

Question

フィルタは透過性のある画像に適用されます。私は、このフィルタを不透明な領域にのみ適用する必要があります。言い換えれば、アルファはゼロではないと思います。この例では、現在透過領域が洪水の色で満たされていることがわかります。それは可能でしょうか？

svg { 
 
    width: 0; 
 
    height: 0; 
 
} 
 
.myFilter { 
 
    filter: url(#myFilter); 
 
}

<svg> 
 
    <defs> 
 
    <filter id="myFilter" x="0" y="0" width="100%" height="100%" 
 
      color-interpolation-filters="sRGB"> 
 
     <feFlood flood-color="#3a0339" result="flood"/> 
 
     <feBlend mode="exclusion" in="flood" in2="SourceGraphic"/> 
 
    </filter> 
 
    </defs> 
 
</svg> 
 

 
<img class="myFilter" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png">

Answer 1

あなたはfloodフィルタの出力にソースグラフィックのアルファチャネルを適用するfeCompositeノードを使用することができます。

svg { 
 
    width: 0; 
 
    height: 0; 
 
} 
 
.myFilter { 
 
    filter: url(#myFilter); 
 
}

<svg> 
 
    <defs> 
 
    <filter id="myFilter" x="0" y="0" width="100%" height="100%" 
 
      color-interpolation-filters="sRGB"> 
 
     <feFlood flood-color="#3a0339" result="flood"/> 
 
     <feComposite in="flood" in2="SourceAlpha" operator="in" result="flood_alpha"/> 
 
     <feBlend mode="exclusion" in="flood_alpha" in2="SourceGraphic"/> 
 
    </filter> 
 
    </defs> 
 
</svg> 
 

 
<img class="myFilter" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png">