基本図形の表示
まずは、基本図形を表示します。
サイズ「50,50」の正方形を表示エリアの中央に表示します。
<svg id="svg1" width="200" height="200" viewBox="-75 -75 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" style="fill:none;stroke-width:1;stroke:#000000"></rect>
</svg>
rotate(回転)
定義 rotate(α x y)
α : α度の回転を指定します。
x:回転の基準座標x
y:回転の基準座標y
rotate(-10 50 100)
サンプル
四角形の中心座標を基準に右へ45度回転する。
<svg id="svg2" width="200" height="200" viewBox="-75 -75 200 200" style="background: #eee" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">>
<g fill="grey"
transform="rotate(45 25 25)">
<rect id="square1" x="0" y="0" width="50.0" height="50.0"></rect>
</g>
<use xlink:href="#square1" style="fill:none;stroke-width:1;stroke:#000000"/>
</svg>
translate(移動)
定義 translate(x y)
オブジェクトをxとyによって移動する。yが指定されなかった場合は、0とみなします。
<svg id="svg3" width="200" height="200" viewBox="-75 -75 200 200" style="background: #eee" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">>
<g fill="grey"
transform="translate(50 50)">
<rect id="square3" x="0" y="0" width="50.0" height="50.0"></rect>
</g>
<use xlink:href="#square3" style="fill:none;stroke-width:1;stroke:#000000"/>
</svg>
skewX(X軸の傾斜変換)
定義 skewX(α)
X 軸を基準にα度の傾斜変換を指定します。
サンプル
<svg id="svg4" width="200" height="200" viewBox="-75 -75 200 200" style="background: #eee" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">>
<g fill="grey"
transform="skewX(45)">
<rect id="square4" x="0" y="0" width="50.0" height="50.0"></rect>
</g>
<use xlink:href="#square4" style="fill:none;stroke-width:1;stroke:#000000"/>
</svg>
skewY(Y軸の傾斜変換)
定義 skewY(α)
Y軸を基準にα度の傾斜変換を指定します。
サンプル
<svg id="svg5" width="200" height="200" viewBox="-75 -75 200 200" style="background: #eee" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">>
<g fill="grey"
transform="skewY(45)">
<rect id="square5" x="0" y="0" width="50.0" height="50.0"></rect>
</g>
<use xlink:href="#square5" style="fill:none;stroke-width:1;stroke:#000000"/>
</svg>
scale(拡大・縮小)
scale(x [y])
変換関数は、x とyによる拡大縮小操作を指定します。y が提供されなかった場合は、y と同じと見なします。
サンプル
<svg id="svg6" width="200" height="200" viewBox="-75 -75 200 200" style="background: #eee" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">>
<g fill="grey"
transform="scale(0.5)">
<rect id="square6" x="0" y="0" width="50.0" height="50.0"></rect>
</g>
<use xlink:href="#square6" style="fill:none;stroke-width:1;stroke:#000000"/>
</svg>
四角形に影をつける
サンプル
<svg id="svg7" width="200" height="200" viewBox="-75 -75 200 200" style="background: #eee" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">>
<g fill="grey"
transform="translate(-25 25) skewX(45) scale(1 0.5)">
<rect id="square7" x="0" y="0" width="50.0" height="50.0"></rect>
</g>
<use xlink:href="#square7" style="fill:none;stroke-width:1;stroke:#000000"/>
</svg>
コメント