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” 」と追記すれば期待通りに表示されました。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする