バックグラウンドに関係なく、SVGのフィルタ：ドロップシャドウ（）の色を保持する方法は？

Question

https://codepen.io/dudleystorey/pen/EaMQBjのCodePenの例に基づいて、SVGイメージの周囲に赤い影を追加しようとしました。ただし、背景色が青の場合、色は紫色に変わります。どのように背景色やイメージに関係なく、赤色の色を維持するには？どんな助けもありがとうございます。

#robbie { 
 
background-color: blue; 
 
    display: inline-block; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 
#robbie img { 
 
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, 
 
Color='#444')"; 
 
    filter: url(#drop-shadow); 
 
    -webkit-filter: drop-shadow(0 0 15px rgba(255,0,0,0.9)); 
 
    filter: drop-shadow(0 0 15px rgba(255,0,0,0.9)); 
 
}

<div id="robbie"> 
 
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/robby-the-robot.png" alt> 
 
</div> 
 

 
<svg height="0" xmlns="http://www.w3.org/2000/svg"> 
 
    <filter id="drop-shadow"> 
 
    <feGaussianBlur in="SourceAlpha" stdDeviation="2.2"/> 
 
    <feOffset dx="12" dy="12" result="offsetblur"/> 
 
    <feFlood flood-color="rgba(0,0,0,0.5)"/> 
 
    <feComposite in2="offsetblur" operator="in"/> 
 
    <feMerge> 
 
    <feMergeNode/> 
 
    <feMergeNode in="SourceGraphic"/> 
 
    </feMerge> 
 
</filter> 
 
</svg>

Answer 1

それが次第に透明赤い影を取り、固体青の上にそれを合成する際に、紫色のは、ブラウザによって作成されます。これを修正するには、影を赤色に変更する必要があります。このためにCSSフィルタを使用することはできません.SVGバージョンを使用する必要があります。

<svg height="0" xmlns="http://www.w3.org/2000/svg"> 
    <filter id="drop-shadow"> 
    <feGaussianBlur in="SourceAlpha" stdDeviation="2.2"/> 
    <feOffset dx="12" dy="12" result="offsetblur"/> 
    <feFlood flood-color="rgba(255,0,0,1)"/> 
    <feComposite in2="offsetblur" operator="in"/> 
    <feMerge> 
    <feMergeNode/> 
    <feMergeNode in="SourceGraphic"/> 
    </feMerge> 
</filter> 
</svg> 

ソースが完全に不透明である場合にのみ動作することに注意してください。部分的に透過的なイメージの周りに固体の影が必要な場合は、追加の操作が必要です。