IE11で背景にSVG画像を使用すると、background-positionが効かない問題の対処法

cssで背景画像にSVG画像を指定したところ、IE11ではbackground-positionで指定した位置に画像が表示されず、常に中央に配置されて困りました。

ググりまくって調べた結果、svgを書き換えることで対処できることが分かりました。

いくつかのサイトでは、SVGタグに「preserveAspectRatio=”xMinYMid”」を追加すればOK！みたいに書いてありましたが、あいにくうまくいきませんでした。

preserveAspectRatio に指定する「xMinYMid」の部分を、配置条件に合わせて変更する必要があるようです。

preserveAspectRatioには、以下の値をセットできるようです。

• xMinYMin
• xMidYMin
• xMaxYMin
• xMinYMid
• xMidYMid
• xMaxYMid
• xMinYMax
• xMidYMax
• xMaxYMax

今回の場合、「backgroud-position: center top」という指定だったのですが、 SVGタグに「 preserveAspectRatio=”xMidYMin” 」と追記すれば期待通りに表示されました。

橋本 たかし

ホームページの制作（デザイン・コーディング・プログラミング）に加え、ネットショップの販売促進に関するアドバイスも致します。 20年以上に渡って実際にネットショップを運営した経験を生かし、聞きかじりではない実績を伴ったノウハウを、自分の言葉でお伝えいたします。 プログラミングの経験は30年以上。HTML、CSS、JavaScript、TypeScript、Vue、NuxtJS、Node.js、MySQL、MongoDB、Elasticsearch、WordPress、PHP、Docker、Electronなど、幅広く対応します。

bagooon.com