viewBox属性は、ビューポートにあてはめる領域を指定する際に使われます。
viewBox属性によって、新しいビューポート(viewport)を確立する要素の確立したビューポートにあてはめる領域が指定されます。指定された領域は、拡大あるいは縮小されてビューポートの領域にあてはめられます。新しいビューポートを確立する要素は、svg、animation、imageおよびvideoです。
viewBox属性の値は、確立されたビューポートにあてはめる領域、もしくは"none"です。
ビューポートにあてはめる領域は、左上の頂点のx座標、y座標、領域の幅、高さの4つの数値です。それぞれの数値の間は半角スペース、カンマ(",")、あるいは半角スペースとカンマ(",")で区切ります。区切りのカンマは1つです。幅および高さのどちらかを0にすると何も描画されません。また、負の値を指定してはいけません。
"none"の場合は、viewBox属性が指定されていない場合と同じになります。
例えば、
<svg viewBox="0 0 240 320">
のように書けば、svg文書片の(0,0)(240,0)(240,320)(0,320)に囲まれる矩形領域が(必要なら拡大あるいは縮小されて)ビューポートにあてはめられます。
viewBox属性によって、新しいビューポート(viewport)を確立する要素の確立したビューポートにあてはめる領域が指定されます。指定された領域は、拡大あるいは縮小されてビューポートの領域にあてはめられます。新しいビューポートを確立する要素は、svg、animation、imageおよびvideoです。
viewBox属性の値は、確立されたビューポートにあてはめる領域、もしくは"none"です。
ビューポートにあてはめる領域は、左上の頂点のx座標、y座標、領域の幅、高さの4つの数値です。それぞれの数値の間は半角スペース、カンマ(",")、あるいは半角スペースとカンマ(",")で区切ります。区切りのカンマは1つです。幅および高さのどちらかを0にすると何も描画されません。また、負の値を指定してはいけません。
"none"の場合は、viewBox属性が指定されていない場合と同じになります。
例えば、
<svg viewBox="0 0 240 320">
のように書けば、svg文書片の(0,0)(240,0)(240,320)(0,320)に囲まれる矩形領域が(必要なら拡大あるいは縮小されて)ビューポートにあてはめられます。