座標変換（transform）には、
- 移動（translate）
- 回転（rotate）
- 拡大縮小（scale）
- 傾き（skewX, skewY）
がある。
指定の仕方は、transform="translate(10,20) scale(2)" のように座標変換（transform）の
属性の値として続けて指定する。ちょっと変わった形式なので、スペルミスをしないように
するように注意が必要だろう。間違いやすいので、グループ（g）ごとに指定するとよいだろう。
画像は、
Open Clip Air Libraryより拝借。
移動（translate）
起動（translate）は、x移動とy移動を指定する。
<use xlink:href="#pc" opacity="0.5" />
<use xlink:href="#pc" transform="translate(120,80)" />
原点（0,0）の位置から（120,80）の場所まで移動するために translate(120,80)を指定する。
実は、このように use タグを使ったときの移動の場合では、次のように座標（x,y）を指定しても
同じように表示される。
座標変換（transform）は、use タグ以外にもグループ（g）、図形（rect, circle など）でも
使えるので、その場合に translate で移動するとよいだろう。
<use xlink:href="#pc" opacity="0.5" />
<use xlink:href="#pc" transform="translate(120,80)" />
回転（rotate）
回転（rotate）は、角度と支点（x,y）を指定する。
角度は時計回りに度で指定する。360でひとまわりする。
rotate(30) のように支点を指定しない場合には、原点（0,0）が支点となる。
原点（0,0）以外に支点を移したい場合は、rotate(30,100,50) のように 角度, x支点, y支点 の順で
指定する。この場合には、「支点を(100,50)にして、30度回転する」という意味になる。
<!-- center 0,0 -->
<use xlink:href="#pc" opacity="0.5" />
<use xlink:href="#pc" transform="rotate(30)" />
<!-- center 200,60 -->
<use xlink:href="#pc" x="140" y="0" opacity="0.5"/>
<use xlink:href="#pc" x="140" y="0" transform="rotate(30,200,60)" />
原点（0,0）で回転する場合には、角度だけ指定すればよいが、
図形の中心で回転させるためには、支点の計算が必要になり、やや面倒くさい。
この場合には、いったん図形を回転させてから translate を使って移動させると少し楽になる。
<g transform="translate(140,0)">
<use xlink:href="#pc" transform="rotate(30,60,60)" />
</g>
拡大縮小（scale）
拡大縮小（scale）は、xy軸それぞれの拡大率を指定できる。
scale(0.5, 2) のようにすると、x方向に 0.5 倍、y方向に 2 倍した図形が得られる。
また、scale(2)のようにすると、縦横 2 倍の図形になる。
<use xlink:href="#pc" transform="scale(2,1.5)" />
注意したいのは、これも回転（rotate）と同じように、基準点は原点（0,0）になることである。
図形の大きさだけでなく、図形の位置も拡大縮小の対象となるので、単純に図形を拡大したい場合には、
移動（translate）との組み合わせが必要になる。
<g transform="translate(80,20)">
<use xlink:href="#pc" transform="scale(2,1.5)" />
</g>
next