SVG覚書 transform(変形)

svg

基本図形の表示

まずは、基本図形を表示します。
サイズ「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>
>

参考

コメント