☰

SVG を親コンテナに合わせてスケールするにはどうすればいいですか? 質問する

tag-icon • tag-icon css html svg scaling
SVG を親コンテナに合わせてスケールするにはどうすればいいですか? 質問する

サイズがネイティブでない場合に、インライン SVG 要素のコンテンツを拡大縮小したいと思います。もちろん、別のファイルとして用意して、そのように拡大縮小することもできます。

index.html:

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

foo.svg:

<svg width="123" height="456"></svg>

ただし、CSS を通じて SVG に追加のスタイルを追加したいので、外部のスタイルをリンクすることはできません。インライン SVG スケールを作成するにはどうすればよいですか?

ベストアンサー1

画像の拡大縮小サイズとは無関係に SVG 画像内の座標を指定するには、viewBoxSVG 要素の 属性を使用して、画像の座標系における画像の境界ボックスを定義し、widthおよびheight属性を使用して、画像を含むページに対する幅または高さを定義します。

たとえば、これは 10 ピクセル x 20 ピクセルの三角形としてレンダリングされます。

svg {
  border: 1px solid blue;
}
<svg>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

ここで、幅と高さのみを設定すると、SVG 要素のサイズは変更されますが、三角形の拡大縮小は行われません。

svg {
  border: 1px solid blue;
}
<svg width=100 height=50>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

ビュー ボックスを設定すると、指定されたボックス (画像の座標系) が指定された幅と高さ (ページの座標系) に収まるように拡大されるように画像が変換されます。たとえば、三角形を 100 ピクセル x 50 ピクセルに拡大するには、次のようにします。

svg {
  border: 1px solid blue;
}
<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 {
  border: 1px solid blue;
}
<svg width="100%" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

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

svg {
  border: 1px solid blue;
}
<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 {
  border: 1px solid blue;
}
<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>

おすすめ記事