SVGをレスポンシブに対応させる際に少し手間取ったので、対応方法をメモしておきます。
うまくいかなかった場合
まずはうまくいかなかったコードです。
HTML
1 2 3 4 5 | <div class="contents"> <svg width="400" height="400" viewBox="0 0 400 400"> <circle cx="200" cy="200" r="200" fill="#ccc" /> </svg></div> |
CSS
1 2 3 4 5 6 7 8 | .contents { max-width: 400px; margin: auto;}.contents svg { width: 100%; height: auto;} |
SVGにwidth: 100%; height: auto;でいけるかと思ったのですが、IEでうまく表示できていませんでした。
SVGのレスポンシブ対応でうまくいかなかった場合のデモページ
うまくいった場合
iframeなどのレスポンシブ対応と同様の方法で対応できました。
HTML
1 2 3 4 5 6 7 | <div class="contents"> <div class="svg-wrapper"> <svg width="400" height="400" viewBox="0 0 400 400"> <circle cx="200" cy="200" r="200" fill="#ccc" /> </svg> </div></div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .contents { max-width: 400px; margin: auto;}.svg-wrapper { position: relative; width: 100%; padding-top: 100%; /* SVG高さ / SVG幅 * 100 */}.svg-wrapper svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%;} |
【参考サイト】
コメントが承認されるまで時間がかかります。