やりたいこと
<div width="100%"></div>
内で、(画面の大きさに合わせて)できるだけ大きくSVG表示したい。
width="100%"内なので、SVGに大きさの固定数値を指定したくない。
縦横比は可変してもよい。
追記
下記のような感じですか?
svgタグ自体には width や height や viewBox属性を別に指定しなくてもよいのですか?
<div style="width: 100%;">
<svg>
<!-- ここにSVGの内容を記述 -->
</svg>
</div>
追記 2
rectタグをできるだけ緑色の範囲まで大きく表示させたいのですが、rect タグのx位置やy位置は固定ですか? widthも100%にはならないのですか?
縦横比は可変でもよいと思い、試しに<svg preserveAspectRatio="none">
へ変更してみましたが、表示は何も変わりませんでした。
body {
background-color: yellow;
margin: 0;
}
<div style="width: 100%;background-color:green;">
<svg>
<rect x="42.597706" y="42.440388" style="fill:#d6eaff;" width="1598.741699" height="2298.899414"></rect>
</svg>
</div>