[解決済み】svgを親コンテナと一緒に拡大縮小するにはどうすればいいですか？

質問

インラインのsvg要素で、サイズがnon-nativeの時に内容を拡大縮小させたい。もちろん、別のファイルとして持っていて、そのように拡大縮小することは可能です。

index.html。 <img src="foo.svg" style="width: 100%;" />

foo.svg。 <svg width="123" height="456"></svg>

しかし、CSSでSVGにスタイルを追加したいので、外部のものをリンクすることは選択肢にない。インラインでSVGを拡大縮小するにはどうしたらいいでしょうか？

どのように解決するのですか？

SVG 画像内の座標を、画像の拡大縮小とは無関係に指定する場合は viewBox 属性を使って、画像の座標系におけるバウンディングボックスが何であるかを定義し、SVG要素上の width と height 属性で、含むページを基準にした幅や高さを定義します。

例えば、以下のような場合です。

<svg>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

10px×20pxの三角形でレンダリングされます。

さて、幅と高さだけを設定すると、SVG要素の大きさは変わりますが、三角形の大きさは変わりません。

<svg width=100 height=50>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

<イグ

ビューボックスを設定すると、（画像の座標系で）与えられたボックスが（ページの座標系で）与えられた幅と高さに収まるように画像を拡大変換するようになる。例えば、三角形を100px×50pxに拡大する場合。

<svg width=100 height=50 viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

<イグ

HTMLのビューポートの幅まで拡大したい場合。

<svg width="100%" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

<イグ

デフォルトでは、アスペクト比は維持されることに注意してください。したがって、要素の幅を 100%、高さを 50px と指定した場合、実際には高さ 50px までしか拡大されません (非常に狭いウィンドウを使用している場合を除く)。

<svg width="100%" height="50px" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

<イグ

実際に横方向に伸ばしたい場合は、アスペクト比の保存を無効にして preserveAspectRatio=none :

<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

<イグ

(私の例ではHTMLの埋め込みに有効な構文を使用していますが、StackOverflowに画像として例を含めるには、代わりに別のSVGに埋め込むことになるので、有効なXML構文を使用する必要があることに注意してください)