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