SVG定義 ViewBoxBox
正方形の表示。
<svg id="svg1" width="200" height="200" viewBox="0 0 200 200" style="background: #eee" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">>
<rect id="square" x="0" y="0" width="50.0" height="50.0"></rect>
</svg>
1行目:表示エリアをwidth=”200″ height=”200″に設定します。
描画エリアをwidth=”200″ height=”200″に設定します。
2行目:SVG画像のサイズをwidth=”50″ height=”50″に設定します。
表示位置の移動
SVGオブジェクト定義での移動
<svg id="svg1" width="200" height="200" viewBox="0 0 200 200" style="background: #eee" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">>
<rect id="square" x="50" y="50" width="50.0" height="50.0"></rect>
</svg>
2行目:x=”50″ y=”50″でSVGオブジェクト表示位置を変更してます。
viewBox定義での移動
<svg id="svg3" width="200" height="200" viewBox="-50 -50 200 200" style="background: #eee" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect id="heart" x="0" y="0" width="50.0" height="50.0"></rect>
</svg>
1行目:viewBox=”-50 -50 200 200″でSVGオブジェクト表示位置を変更してます。
拡大・縮小
拡大
<svg id="svg3" width="200" height="200" viewBox="0 0 100 100" style="background: #eee" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect id="heart" x="0" y="0" width="50.0" height="50.0"></rect>
</svg>
1行目:描画エリア「viewBox=”0 0 100 100″」に対して、表示エリア「width=”200″ height=”200″」が倍のサイズになっているため、2倍に拡大された正方形が表示されます。
拡大した図形を中央に表示
<svg id="svg4" width="200" height="200" viewBox="-25 -25 100 100" style="background: #eee" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect id="heart" x="0" y="0" width="50.0" height="50.0"></rect>
</svg>
縮小
<svg id="svg4" width="200" height="200" viewBox="0 0 400 400" style="background: #eee" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect id="heart" x="0" y="0" width="50.0" height="50.0"></rect>
</svg>
1行目:描画エリア「viewBox=”0 0 400 400″」に対して、表示エリア「width=”200″ height=”200″」が1/2倍のサイズになっているため、1/2倍に縮小された正方形が表示されます。
コメント