SVGフィルタでIE11対応かつレスポンシブに画像をぼかす

Warning: Trying to access array offset on value of type null in /home/sezaki/sezaki-design.com/public_html/wordpress/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Warning: Trying to access array offset on value of type null in /home/sezaki/sezaki-design.com/public_html/wordpress/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

コーディングで画像をぼかす場合は、CSSの「filter」プロパティで「blur」を使うと簡単。
例えば10pxのぼかしを入れたい場合は「filter: blur(10px)」のようにします。
しかし悲しいことに「IE11」では効きません。

そこでIE11にも対応させる場合は、SVGのフィルタ「feGaussianBlur」を使うとで似たようなことができます。
ただ、IE11ではSVGタグのサイズをCSSで指定した時の挙動も独特なので、その点も考慮したIE11対応かつレスポンシブで画像にぼかし効果をかける場合のソースコードは以下になります。

<div class="svg-container">
  <svg width="アートボードの幅" height="アートボードの高さ" viewBox="アートボードの4点の座標">
    <defs>
      <filter id="blur">
        <feGaussianBlur stdDeviation="ぼかしの大きさ" />
      </filter>
    </defs>
    <image x="0" y="0" width="画像の幅" height="画像の高さ" xlink:href="画像のパス" filter="url(#blur)" />
  </svg>
</div>

.svg-container {
  width: 100%;
  padding-top: 66%;//画像の高さ÷画像の幅
  position: relative;
  overflow: hidden;

  svg {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
  }
}

結果

See the Pen SVG filter feGaussianBlur by sezakidesign (@sezakidesign) on CodePen.default

ポイントとしては、IE11対応でSVGのfilterを使う点と、普通にSVGのサイズをCSSで変更するとIE11では想像通りの挙動にならないので、画像の比率で可変する親要素を作り、その中で絶対位置で配置する点です。

結果

Related Posts