39431

[code]

    box-shadow: 0 0 20px #000;
    
[/code]

たとえば、CSSで作った影をと同じものをSVGで作るとき、

[code]

    <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>
    
[/code]

このように `stdDeviation` の値を4分の1の `5` にしていますが、`box-shadow` と比べてほんの少し小さい影になってしまいます。  
等価になるような計算方法があれば教えてください。よろしくお願いします。

[code]

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

[code]

    <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>
[/code]


CC BY-SA 3.0
2017-10-28T04:54:19.603
39094
2017-11-09T03:33:33.353
19687
question
html css svg
box-shadowのblur-radiusからSVGのstdDeviationへの変換


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

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

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

[code]

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

[code]

    <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>
[/code]

* * *

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


CC BY-SA 3.0
2017-11-09T00:11:24.263
39431
2017-11-09T03:33:33.353
2017-11-09T03:33:33.353
5667
5667
39094
answer