サーチ…


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>

そのコードは次のようになります。

大きな60ピクセルの星アイコン

viewBoxがなければ、次のようになります。

小さな16ピクセルスターアイコン

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>

容器内の中心にある星

preserveAspectRationoneに設定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