SVG覚書 ViewBoxBox(移動、拡大、縮小)

svg

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倍に縮小された正方形が表示されます。

参考サイト

コメント