サーチ…
viewBox
viewBox属性は、 <svg>
要素の座標系を定義します。これにより、描画された各要素の位置と大きさを調整することなく、SVGグラフィックのサイズと相対的な比率を簡単に変更することができます。
<!-- stretches a small icon to 60px square -->
<svg viewBox="0 0 16 16" height="60px" width="60px">
<path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>
そのコードは次のようになります。
viewBoxがなければ、次のようになります。
preserveAspectRatio
preserveAspectRatio
は、イメージを均一にスケーリングする必要があるかどうかを示す属性です。この属性は、 <svg>
要素にもviewBox
がある場合にのみ機能します。
デフォルト値はxMidYMid
、これはアスペクト比を維持し、パスをSVGコンテナの中心にxMidYMid
ます。
<!-- when not included `preserveAspectRatio` defaults to `xMidYMid` -->
<svg viewBox="0 0 16 16" height="60" width="120">
<path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>
preserveAspectRatio
がnone
に設定preserveAspectRatio
いる場合、アイコンはボックスに収まるように伸びます。
<svg viewBox="0 0 16 16" height="60" width="120" preserveAspectRatio="none">
<path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>
preserveAspectRatio
は他にも多くの値がありますが、これらの2つがはるかに一般的です。
preserveAspectRatio - 属性の一致とスライス
preserveAspectRatio
属性にはオプションのパラメータがあります: meet
| slice
。デフォルトの動作は、 meet
ことがビューボックスの幅または高さのいずれかを満たすまで、x及びy次元の両方でコンテンツを伸ばし。代わりのslice
はコンテンツのアスペクト比を維持しますが、ビューボックスの幅と高さの両方を満たすまで(viewBoxをオーバーフローさせるコンテンツを切り取るまで)グラフィックを拡大します。
これは、 slice
を使用した例です
<svg viewBox="0 0 16 16" height="60px" width="120px" preserveAspectRatio="xMinYMin slice">
<path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
次のようにレンダリングされます。
meet
を使用した同じ例
<svg viewBox="0 0 16 16" height="60px" width="120px" preserveAspectRatio="xMinYMin meet">
<path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>
次のようにレンダリングされます。
Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow