SVG覚書 transform（変形）

基本図形の表示

まずは、基本図形を表示します。
サイズ「５０，５０」の正方形を表示エリアの中央に表示します。

<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)

α ： α度の回転を指定します。
ｘ：回転の基準座標ｘ
ｙ：回転の基準座標ｙ
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が指定されなかった場合は、０とみなします。

<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(α)

Ｙ軸を基準にα度の傾斜変換を指定します。

サンプル

<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>

参考