box-shadowのblur-radiusからSVGのstdDeviationへの変換
box-shadow: 0 0 20px #000;
たとえば、CSSで作った影をと同じものをSVGで作るとき、
<svg width="100px" height="100px">
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" result="blurOut" stdDeviation="5"/>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
</filter>
<polygon points="0,0 100,0 100,100 0,100" fill="#fff" filter="url(#shadow)"/>
</svg>
このように stdDeviation
の値を4分の1の 5
にしていますが、box-shadow
と比べてほんの少し小さい影になってしまいます。
等価になるような計算方法があれば教えてください。よろしくお願いします。
.box-shadow {
width: 100px;
height: 100px;
margin: 50px;
box-shadow: 0 0 20px #000;
}
svg {
margin: 50px;
overflow: visible;
}
<p>box-shadow</p>
<div class="box-shadow"></div>
<p>svg shadow</p>
<svg width="100px" height="100px">
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" result="blurOut" stdDeviation="5"/>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
</filter>
<polygon points="0,0 100,0 100,100 0,100" fill="#fff" filter="url(#shadow)"/>
</svg>