SVGフィルタでIE11対応かつレスポンシブに画像をぼかす
コーディングで画像をぼかす場合は、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 blur Responsive for IE11 by sezakidesign (@sezakidesign) on CodePen.
ポイントとしては、IE11対応でSVGのfilterを使う点と、普通にSVGのサイズをCSSで変更するとIE11では想像通りの挙動にならないので、画像の比率で可変する親要素を作り、その中で絶対位置で配置する点です。