SVG覚書 ViewBoxBox（移動、拡大、縮小）

SVG定義　ViewBoxBox
参考サイト

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>

１行目：表示エリアをwidth=”200″ height=”200″に設定します。
　　　　描画エリアをwidth=”200″ height=”200″に設定します。
２行目：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>

２行目：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>

１行目：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>

１行目：描画エリア「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>

１行目：描画エリア「viewBox=”0 0 400 400″」に対して、表示エリア「width=”200″ height=”200″」が1/2倍のサイズになっているため、1/2倍に縮小された正方形が表示されます。