SVG ViewportとViewBox

SVG画像のビューポート（Viewport）と視区（ViewBox）は、画像の可視部分のサイズを設定できます。

viewportとviewboxの違い

1、viewportは視口と呼ばれ、ディスプレイのスクリーンに相当します。

2、viewboxは視区と呼ばれ、スクリーン上の小さな部分を拡大して全体のスクリーンに表示することで、特写効果が得られます。

3、preserveAspectRatioはviewboxとviewportのアライメントとスケール方法を指定します。

ビューポート（Viewport）

ビューポート（Viewport）はSVG画像の可視領域です。論理的には、SVG画像はご希望の通りに幅と高さが設定できますが、一度に表示できるのは画像の特定の部分だけです。可視領域はビューポート（Viewport）と呼ばれます。

要素のwidthおよびheight属性を使用してビューポート（Viewport）の大きさを指定できます<svg>。以下は例です：

<svg　width="500"　height="300"></svg>

この例では、定義されたビューポート（Viewport）は5幅3高さ

座標システム単位

widthおよびheight属性に単位が指定されていない場合、デフォルトでピクセルが使用されます。つまり、width500は以下を示します5ピクセル。

ピクセル単位以外の単位を使用したい場合は、以下のリストに従って<svg>要素と一緒に使用できる単位を選択できます：

SVG要素に設定された単位は、SVG要素（ビューポート（Viewport））の大きさに影響を与えます。SVG画像に表示されるSVG形状の大きさは、各形状に設定された単位で決定されます。単位が指定されていない場合、デフォルトでピクセルが使用されます。

これは<svg>がユニットを持つ要素のセットを含む例で、形状には独自のユニット集合があります：

<svg　width="10cm"　height="10cm">
　　　　<rect　x="50"　y="100"　width="50"　height="50"
　　　　　　　　　　style="stroke:　#000000;　fill:　none;"/>
　　　　<rect　x="100"　y="100"　width="50mm"　height="50mm"
　　　　　　　　　　style="stroke:　#000000;　fill:　none;"　/>
</svg>

この<svg>画像には単位cmが設定されています。この二つの<rect>要素にはそれぞれ独自の単位集合があります。一つはピクセル（単位が明示的に設定されていない）で、もう一つはmmの幅と高さが使用されます。

これは生成された画像です。右側のボックス（widthとheightの単位mm）は左側のボックスよりも大きいことに注意してください。

ビューワーフォックス（ViewBox）

SVG要素内の未設定の座標の意味を再定義できます。これを行うためにはviewBox属性を使用します。これは例です：

<svg　width="500"　height="200"　viewBox="0　0　50　20"　>
　　　　<rect　x="20"　y="10"　width="10"　height="5"
　　　　　　　　　　style="stroke:　#000000;　fill:none;"/>
</svg>

この例では、<svg>の幅が500ピクセル、高さが200の要素。のviewBox属性<svg>には4つの座標が含まれており、これらの座標は<svg>要素のビューワーフォックス（ViewBox）を定義します。座標はx y width heightで、ビューワーフォックス（ViewBox）の座標です。

この場合、ビューワーフォックス（ViewBox）は0,0から始まり、50幅で、20高。つまり、500 x 200ピクセル<svg>要素は内部で0,0から50、20。つまり、内部形状の座標内の各1単位<svg>が幅に対応する500/50 = 10ピクセル、高さが対応する理由200/20 = 10ピクセル。これがx位置が20、y位置が10の矩形が実際に位置する理由200、100、そしてその幅（10）および高さ（5）はそれぞれ、10ピクセルと5ピクセル。

もう一つの解釈方法は、viewBox属性の<svg>の最初の二つの座標が要素の左上のユーザーコーディネートを定義し、後ろの二つの座標が右下のユーザーコーディネートを定義することです。内的な空間　<svg>は、ビューワーフォックス（ViewBox）の左上の座標から右下の座標まで解釈されます。

実行後の画像効果：

注意してください、<rect>要素内部のすべての座標はどのように解釈されるか1単位の10ピクセル。

横高比を保つ

ビューポート（Viewport）とビューワーフォックス（ViewBox）の横縦比（横高比）が異なる場合、SVGビューア（例えばブラウザ）がSVG画像をどのように表示するかを指定する必要があります。この操作は、要素のpreserveAspectRatio属性を使用して実行できます<svg<。

このpreserveAspectRatio属性はスペースで区切られた二つの値を使用します。最初の値はビューエリア(ViewBox)がビューポート(Viewport)内でどのように対齐するかを示します。この値自体も二つの部分で構成されています。第二の値は（あれば）縦横比をどのように保つかを指示します。

対齐方法を指定する最初の値は二つの部分で構成されています。第一部分はxの対齐方法を指定し、第二部分はyの対齐方法を指定します。これはxとyの対齐値の一覧です：

x成分をy成分の後ろに付ければ、x成分とy成分を一つの値にまとめることができます。これは二つの例です：

xMaxYMax
xMidYMid

これら二つの例はビューエリア(ViewBox)とビューポート(Viewport)の対齐方法を異にします。最初の例ではビューエリアの右端がビューポートの右端と対齐します。第二の例ではビューエリアの中心がビューポートの中心と対齐します。

preserveAspectRatio属性値の第二部は三つの異なる値を取ることができます：

preserveAspectRatio属性値の第二部を第一部に追加し、スペースで区切ります。これは二つの例です：

preserveAspectRatio="xMidYMid　meet"
preserveAspectRatio="xMinYMin　slice"

まだ、さまざまなpreserveAspectRatio設定の効果について詳しく語っていませんので、それを見てみましょう。

以下の例では、widthを500にviewBox属性を設定し、heightを75。これはx軸では、各座標ユニットが 250 75ピクセルに対応します。2ピクセルですが、y軸では、各座標ユニットは1ピクセルです。ご覧の通り、x軸の比が500/250 = 2、y軸の比が75/75 = 1。これは画像が歪む可能性がありますが、以下の例では、さまざまなpreserveAspectRatio設定がこれらの設定をどのように処理するかを見てみましょう。

これはpreserveAspectRatioがxMinYMin meetに設定された最初の例です。これにより、幅高比が保たれ、ビューボックス（ViewBox）のサイズがビューポート（Viewport）に合わせて調整されます。つまり、2つの纵横比（y軸の比が1）の小さい方にビューボックス（ViewBox）を拡大します。xMinYMin部分のために、ビューボックス（ViewBox）はビューポート（Viewport）の左上隅に配置されます。これはコードと生成された画像です：

<svg　width="500"　height="75"　viewBox="0　0　250　75"　　　　　preserveAspectRatio="xMinYMin　meet"
　　　　　style="border:　1px　solid　#cccccc;">
　　　　<rect　x="1"　y="1"　width="50"　height="50"
　　　　　　　　　　style="stroke:　#000000;　fill:none;"/>
</svg>

第二个示例ではpreserveAspectRatioがxMinYMin sliceに設定されています。これにより、幅高比が保たれますが、大きな幅高比（x軸の比が2）ビューボックス（ViewBox）を拡大し、その結果、画像がビューポート（Viewport）に収まらなくなります。この画像は「スライス」と呼ばれます。

<svg　width="500"　height="75"　viewBox="0　0　250　75"　　　　　preserveAspectRatio="xMinYMin　slice"
　　　　　style="border:　1px　solid　#cccccc;">
　　　　<rect　x="1"　y="1"　width="50"　height="50"
　　　　　　　　　　style="stroke:　#000000;　fill:none;"/>
</svg>

第三个示例preserveAspectRatioがnoneに設定されています。これはビューボックス（ViewBox）が整个視口（Viewport）を埋めることを意味し、x軸とy軸の幅高比が異なるため、画像が歪むことを意味します。

<svg　width="500"　height="75"　viewBox="0　0　250　75"　　　　　　preserveAspectRatio="none"
　　　　　　style="border:　1px　solid　#cccccc;">
　　　　　<rect　x="1"　y="1"　width="50"　height="50"
　　　　　　　　　　　style="stroke:　#000000;　fill:none;"/>
</svg>

ビューボックス（ViewBox）のアライメント

これまでに表示されたすべての例では、このxMinYMin設定を使用していました。ビューポート（Viewport）内でビューボックス（ViewBox）をどのようにアライメントするかによって、他の設定を使用することもできます。これらの設定の動作についてもっと詳しく見てみますが、まずは一例を見てみましょう：

<svg　width="500"　height="100"　viewBox="0　0　50　50"　　　　
preserveAspectRatio="xMinYMin　meet"　　　　
style="border:　1px　solid　#cccccc;">　　　　
<circle　cx="25"　cy="25"　r="25"　　　　
style="stroke:　#000000;　fill:none;"/>　　　　
</svg>　　　　
<svg　width="500"　height="100"　viewBox="0　0　50　50"　　　　
preserveAspectRatio="xMidYMin　meet"　　　　
style="border:　1px　solid　#cccccc;">　　　　
<circle　cx="25"　cy="25"　r="25"　　　　
style="stroke:　#000000;　fill:none;"/>　　　　
</svg>　　　　
<svg　width="500"　height="100"　viewBox="0　0　50　50"　　　　
preserveAspectRatio="xMaxYMin　meet"　　　　
style="border:　1px　solid　#cccccc;">　　　　
<circle　cx="25"　cy="25"　r="25"　　　　
style="stroke:　#000000;　fill:none;"/>　　　　
</svg>

この例では、<svg>タグとwidth属性のグループ500とheightを100。viewBoxを　0 0に設定 50 50です。これにより、x軸の長さと幅の比は500/50 = 10、y軸の長さと幅の比は100/50 =2。画像の円の半径は25、幅を50ピクセル幅、高50ユニットです。したがって、それは整个ビューワー(ViewBox)をフィルタします（ビューワー(ViewPort)ではなく）。

meet記号を使用する場合、ビューワー(ViewBox)はy軸に基づいて縮尺されます。これは、その纵横比が小さいためです。これは、ビューワー(ViewBox)がy軸（垂直）に沿って整个ビューワー(ViewPort)をフィルタするが、x軸（水平）に沿ってフィルタするだけという意味です。2 * 50ピクセル= 100ピクセル（纵横比*ビューワー(ViewBox)のXサイズ） 。ビューワー(ViewPort)の幅が500ピクセル、したがって、ビューワー(ViewPort)内でビューワー(ViewBox)を水平にアライメントする方法を指定する必要があります。これを行うために、第一部分のpreserveAspectRatioの属性値のxMin、xMid、xMaxを使用します。

ここには、xMinYMin meet、xMidYmin meet、xMaxYmin meetを使用する例が3つあります。preserveAspectRatio属性で、ビューワー(ViewBox)がどのように左、中央、右にアライメントされるか（設定に応じて）を示しています。

同様に、画像がx軸の纵横比がy軸より小さい場合、そのyアライメントを指定する必要があります。

これは以前の例ですが、今はwidth100とheight200：

ビューワー(ViewBox)の大きさが同じため、y軸方向の長さと幅の比率（200/50 = 4）がx軸方向の長さと幅の比率（100/50 = 2）。したがって、ビューポート(ViewPort)はx軸方向ではなくy軸方向にビューワー(ViewBox)をフィルタします。これにより、ビューワー(ViewBox)のyアライメントを指定する必要があります。

<svg　width="100"　height="200"　viewbox="0　0　50　50"　preserveaspectratio="xMinYMin　meet"　style="border:　1px　solid　#cccccc;">
　　　　<circle　cx="25"　cy="25"　r="25"　style="stroke:　#000000;　fill:none;"></circle>
</svg>
<svg　width="100"　height="200"　viewbox="0　0　50　50"　preserveaspectratio="xMinYMid　meet"　style="border:　1px　solid　#cccccc;">
　　　　<circle　cx="25"　cy="25"　r="25"　style="stroke:　#000000;　fill:none;"></circle>
</svg>
<svg　width="100"　height="200"　viewbox="0　0　50　50"　preserveaspectratio="xMinYMax　meet"　style="border:　1px　solid　#cccccc;">
　　　　<circle　cx="25"　cy="25"　r="25"　style="stroke:　#000000;　fill:none;"></circle>
</svg>

これは3つの画像で、それぞれは子部分値を使用してのYアライメントの可能性であるYMin、YMidおよびYMaxを示しています：