'SVG'ビューボックスを使用するWebデザインガイド（HTML）
Viewboxは、 SVGシェイプを作成するときによく使用される属性です。 ドキュメントをキャンバスと考えると、ビューボックスはビューアに表示させるキャンバスの一部です。 ページがコンピュータ画面全体をカバーしていても、図は全体の3分の1にしか存在しない可能性があります。
Viewboxではパーサにその3番目の画像を拡大表示するよう指示することができます。 追加の空白がなくなります。 ビューボックスをイメージをトリミングする仮想的なアプローチと考えてください。
それがなければ、あなたのグラフィックは実際のサイズの3分の1に見えます。
ビューボックスの値
画像をトリミングするには、画像上にポイントを作成してカットを作成する必要があります。 ビューボックス属性を使用する場合も同じです。 viewboxの値の設定は次のとおりです。
- minx - 開始x座標
- miny - 開始y座標
- width - ビューボックスの幅
- 高さ - ビューボックスの高さ
ビューボックスの値の構文は次のとおりです。
viewBox = "0 0 200 150"
ビューボックスの幅と高さをSVGドキュメントに設定した幅と高さに混同しないでください。 SVGファイルを作成する場合、最初に設定する値の1つが文書の幅と高さです。 ドキュメントはキャンバスです。 ビューボックスは、キャンバス全体またはキャンバスの一部のみをカバーすることができます。
このビューボックスは、ページ全体をカバーします。
このビューボックスは、右上隅から始まるページの半分をカバーします。
あなたのシェイプにも、高さと幅の割り当てがあります。
これは、800×400ピクセルのドキュメントで、右上隅から開始し、ページの半分を拡大するビューボックスを備えています。 図形は、ビューボックスの右上隅から始まり、左に100ピクセル、下に50ピクセル移動する四角形です。
ビューボックスを設定する理由
SVGは形状を描くだけではありません。 影の効果のために、別の図形の上に1つの図形を作成することができます。 それはある方向に傾けるように形を変換することができます。 高度なフィルタの場合、ビューボックス属性を理解して使用する必要があります。