ブログ

  1. トップページ
  2. 更新履歴
  3. [Web][Microsoft Edge]CSS内でSVGを背景画像に指定した際にEdgeで表示されない問題(viewBoxっぽい)

[Web][Microsoft Edge]CSS内でSVGを背景画像に指定した際にEdgeで表示されない問題(viewBoxっぽい)

  • 投稿日:2019/01/08
  • 最終更新:2019/02/05

Microsoft Edgeが嫌いです、バカなので。

EdgeやIEでSVGがうまく表示されないっていうのは定番だと思うんですが本当にちょこちょこハマるので備忘録、、IEはそろそろ引退なのでまだ許すしEdgeよりはまだ理解のある処理をしてくれるのでいいです。
後継ブラウザであるEdgeがなんで一番バカなのかな。

多分viewBoxの数値が大きいとEdgeでだけ正常に表示されない

SVGの中にはSVGタグ自体が持つwidth・height属性の設定、viewBoxの数値設定、style属性の設定のいずれかなのかviewBoxなのかはっきりと調べてないのですが、「表示されている」ファイルとだめだったファイルを見比べるに、おそらくviewBoxの値が大きいとEdgeでは例えCSSで数値指定しても任意の大きさで表示されない。

どうすんのか

とりあえず素材のSVGファイルをXD上に実寸で配置してからXDからSVG書き出しすればソースの無駄を省きつつ実寸のviewBox設定で書き出してくれます。とりあえずね、、

Microsoft、ブラウザ作るのやめてくれないかな……