box-shadowのblur-radiusからSVGのstdDeviationへの変換

投稿者: Anonymous
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 と比べてほんの少し小さい影になってしまいます。
等価になるような計算方法があれば教えてください。よろしくお願いします。

_x000D_

_x000D_

.box-shadow {_x000D_
  width: 100px;_x000D_
  height: 100px;_x000D_
  margin: 50px;_x000D_
  box-shadow: 0 0 20px #000;_x000D_
}_x000D_
_x000D_
svg {_x000D_
  margin: 50px;_x000D_
  overflow: visible;_x000D_
}

_x000D_

<p>box-shadow</p>_x000D_
<div class="box-shadow"></div>_x000D_
_x000D_
<p>svg shadow</p>_x000D_
<svg width="100px" height="100px">_x000D_
  <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">_x000D_
    <feGaussianBlur in="SourceAlpha" result="blurOut" stdDeviation="5"/>_x000D_
    <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>_x000D_
  </filter>_x000D_
  <polygon points="0,0 100,0 100,100 0,100" fill="#fff" filter="url(#shadow)"/>_x000D_
</svg>

_x000D_

_x000D_

_x000D_

解決

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

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

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

_x000D_

_x000D_

.box-shadow {_x000D_
  width: 100px;_x000D_
  height: 100px;_x000D_
  margin: 50px;_x000D_
  box-shadow: 0 0 20px #000;_x000D_
}_x000D_
_x000D_
svg {_x000D_
  margin: 50px;_x000D_
  overflow: visible;_x000D_
}

_x000D_

<p>box-shadow</p>_x000D_
<div class="box-shadow"></div>_x000D_
_x000D_
<p>svg shadow</p>_x000D_
<svg width="100px" height="100px">_x000D_
  <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">_x000D_
    <feGaussianBlur in="SourceAlpha" result="blurOut" stdDeviation="10"/>_x000D_
    <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>_x000D_
  </filter>_x000D_
  <polygon points="0,0 100,0 100,100 0,100" fill="#fff" stroke-linejoin="round" filter="url(#shadow)"/>_x000D_
</svg>

_x000D_

_x000D_

_x000D_


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

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *