0
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>

1 件の回答 1

0

CSSにおけるblur-radius値はSVGでのstdDeviation値のちょうど倍になります.

従ってbox-shadow:0 0 20px #000と等価な影をfeGaussianBlurで表現するにはstdDeviation="10"とすれば良いのです.

https://drafts.csswg.org/css-backgrounds-3/#shadow-blur

.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="10"/>
    <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
  </filter>
  <polygon points="0,0 100,0 100,100 0,100" fill="#fff" stroke-linejoin="round" filter="url(#shadow)"/>
</svg>


追記)
仕様上はこの通りなのですが, ブラウザによって影の範囲にバラつきがあるようです.

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。