この記事では、主に、HTML5でSVG画像を使用する際のViewBox属性の使用法を紹介します。それを必要とする友達は、ビューボックスのパラメーターをすばやく理解するためにそれを参照できます
Viewbox属性は、ユーザーSVG画像の座標系の原点とサイズを指定するために使用されます。 SVGで描かれたすべてのコンテンツは、この座標系に対して行われます。 SVGキャンバスはすべての方向に無限に拡張されているため、この座標系の境界外にグラフィックを描画することもできます。ただし、SVGウィンドウに対して配置されたこれらのグラフィックは、ユーザーの座標系の位置によって制御することもできます。
Viewboxプロパティは、4つのパラメーターを使用して、座標系の原点とそのサイズの位置、XY幅の高さを指定します。最初のケースでは、この座標系は、初期化されたウィンドウ座標系（SVG画像の幅と高さで決定）に相当し、その原点は（0、0）、つまりSVGの左上隅にあります。
2つのパラメーターxとyの値を変更することにより、原点の位置を調整できます。幅と高さの値を変更して、座標系のサイズを変更します。 ViewBox属性を使用して、SVGキャンバスの拡張またはトリミングを支援します。例で読んでください。
重要：この記事では、SVGウィンドウ内のビューボックスのデフォルトの動作（スケールと位置）を変更しません。なぜなら、属性のデフォルトの動作によれば、Viewboxのコンテンツは可能な限り完全にウィンドウに含まれ、その後中央に配置されるからです。ただし、PreserveaspectRatioプロパティを使用すると、ビューボックスのサイズと位置を自由に変更できますが、この記事ではこれは必要なテクニックではないため、ここでも詳細に説明しません。
Viewboxを使用してSVGをトリミングします。つまり、Viewbox属性を使用して、アートの方向性のSVGを作成します
少し前に、私のクライアントの1人が、自分のウェブサイトのSVGアバターをさまざまな画面サイズに応じて異なるサイズに設定するように求めたため、小さな画面には小さな部分のみが表示され、中画面サイズで大部分が表示され、完全なコンテンツが大画面で表示されます。当時の最初のアイデアは、彼の要件がViewbox属性を使用してSVG画像をトリミングし、さまざまな画面サイズに基づいて見たい画像の特定の部分を表示することだったということでした。
SVG座標系のサイズと原点を変更することにより、SVGをトリミングして、ウィンドウに表示するコンテンツの部分を表示できます。
それを実装する方法を見てみましょう。
次のようにこの完全なSVG画像があると仮定し、小さな画面のサイズでそれをトリミングしたいとします。この画像は、Creative Commons Attribution 3.0 Unported契約の下でライセンスされているFreepikによって設計された無料の使用可能なハウスベクトルです。簡単にするために、最初に、画像が小さな画面と中画面に表示するためにトリミングされるものと、以下に示すように大きな画面に表示される完全なコンテンツについてであると仮定しましょう。
左側の写真は、Viewboxプロパティを使用してトリミングする完全な画像であり、右側の写真は小さな画面に表示したい領域です。
ここで、ViewBoxプロパティの値を変更してSVGをトリミングします。考慮する必要があることがいくつかありますが、後でそれらについて話します。ただし、最初に、上の写真の仮想ボックス長方形領域のコンテンツと一致するように座標系を変更する必要があります。 、システムの原点と幅と高さの値を調整することにより、初期0 0 800 800パラメーター値を変更できます。
しかし、どのようにして新しい座標と新しい次元を知ることができますか？ポイントは、多くの繰り返しの実験やエラーを経験することではありません。
いくつかの方法があります。すでにグラフィックエディター（私の例ではAIを使用している）にいるため、エディターパネルを使用して要素の位置と寸法を取得できます。
私はこの点線の長方形の箱を描いて、小さな画面に表示したいものを表現することに加えて、長方形の位置と寸法を取得し、それらをビューボックスの値として使用できることです。 AIの変換パネル（下の写真）を使用して、必要な値を取得しました。長方形を選択し、右上隅の変換リンクをクリックすることにより、必要なx、y、幅、高さの値を含む、下の図に示すパネルを取得します。
このAIの変換パネルを使用して、選択した長方形の位置とサイズを取得できます。
上記の値が整数ではないことに気付いたかもしれないので、手動で変更する必要があります。上記の情報に基づいて、ViewBoxの値を0 200 512 512に変更します。
新しいビューボックスのアスペクト比はSVGウィンドウ（両方の正方形）のアスペクト比と同じであるため、ビューボックスのコンテンツが拡張され、選択した領域のみがウィンドウに表示されます。 ViewBoxの値を変更した後、結果は図に示されています。
新しくトリミングされたSVG。 WISEBOXプロパティがウィンドウに表示されていることを指定する場所のみ。青い境界線は、SVGの窓を示しています。
この時点で、解決する必要がある問題があります。
トリミングされた領域のアスペクト比（つまり、ビューボックス）がSVGウィンドウのアスペクト比である場合はどうなりますか？
この場合、重大なオーバーフローがあります。明らかなオーバーフローは、SVGウィンドウの境界を越えた拡張機能ではなく、ViewBoxで定義された新しいユーザー座標システムに対するオーバーフローを意味します。次の図は、対応する説明を提供します。
ViewBoxのアスペクト比がViewBoxのアスペクト比と異なる場合、SVGのコンテンツはユーザー座標システムにオーバーフローし、結果は次のようになる場合があります。
黒い境界線は新しいユーザー座標系を表し、青い境界はSVGウィンドウです。
上の正しい画像の黒い境界線は、Viewboxで定義されている領域です。ウィンドウ内のビューボックスのデフォルトの動作によれば、コンテンツがウィンドウ（青色の境界）に含まれることを確認するために、可能な限り拡大され、可能な限り拡大されます。
SVGキャンバスは概念的にすべての方向に無限に拡張されるため、上の図に示すように、ユーザー座標システムの境界外にグラフィックを描画でき、コンテンツは直接オーバーフローして移動します。
SVGウィンドウ（SVGの幅と高さ）のアスペクト比を変更してビューボックスのアスペクト比に適応させる場合、前の例のようにビューボックスのズームがウィンドウに適合しているため、オーバーフローは表示されません。
ただし、場合によっては、SVGのアスペクト比をまったく変更したくない場合もあれもありません。たとえば、ページに画像を表示するためにSVG Spriteを一連の画像として使用している場合。ほとんどの場合、画像には固定されたアスペクト比があり、画像のサイズを変更したくありません。その中の小さな画像の内容に適応するだけです。または、アイコンシステムを埋め込み、すべてのアイコンを同時に同じサイズのままにしてほしいかもしれません。
余分なものを遮断するには（たとえば、スプライトの他のアイコンが窓に表示されます）、<clippath>を使用して余分なものを切り取ることができます。クリッピングパスは、ビューボックス領域全体を覆う<rect>要素になり、その要素をルートSVGに適用できます。
ただし、覚えておくべきこともあります。<rect>のxおよびyプロパティがViewboxと一致していることを確認してください。rectが元/初期化されたシステムの原点に比較的配置されない限り、トリミングされるSVGの内容も不確かです。
CSSコードコピーコンテンツをクリップボードに