STAFF BLOG
2017.05
31
タグ:

背景画像にsvgを使用して、幅いっぱいに表示させようとしたら破綻した。
あるいは言う事をきかない。

「Chromeだと背景サイズ指定がうまく動かねぇよ!」
参考:background-size:100% 100%; doesn’t work properly in Chrome
https://stackoverflow.com/questions/9334095/background-size100-100-doesnt-work-properly-in-chrome

という記事は発見できたがfirefoxでも破綻する報告は見つけられなかった

検証の結果、svgがもつ「アスペクト比を保つプロパティ」を指定されていない場合の動作がブラウザによって違う事が判明。
背景画像にsvgを使用して、かつ、アスペクト比を無視したい場合などには注意が必要。

解決策:png画像に変換する。svgに「preserveAspectRatio=”none”」を追記する

例:svgファイルをテキストエディタで開いてプロパティを追加する

<svg
  width="940px"
  height="34.271px"
  viewBox="0 0 940 34.271"
  preserveAspectRatio="none"
>
  <path fill="#262626" d="M470,3.53c174.86,0,336.921,11.373,470,30.741V0H0v34.271C133.079,14.903,295.14,3.53,470,3.53z"/>
</svg>
このページを友達とシェアしよう!