変換
transform属性
描画を行うときに、位置や大きさの変換をtransform属性で指定することができます。 use要素で用いた例です。
<use xlink:href="#名前" x="位置" y="位置" transform="変換内容" />
のように書きます。
移動
移動は translate(移動量X, 移動量ｙ) で指定します。
<use xlink:href="#名前" x="0" y="0" transform="translate(10,20)" />
と書くと、ｘ方向に１０、ｙ方向に２０移動された位置に表示されます。 x="0" y="0" として使うのがほとんどです。
<use xlink:href="#名前" x="10" y="20" />
という方法でも可能です。
拡大縮小や回転と組み合わせて使う場合には、translateを用いる方が分りやすい。
拡大縮小
大きさの変更は scale(拡大率X, 拡大率ｙ) で指定します。
<use xlink:href="#名前" x="0" y="0" transform="scale(0.5, 0.5)" />
と書くと、ｘ方向ｙ方向とも半分の大きさになります。 原点を基準として拡大縮小されるので x="0" y="0" として使うのがほとんどです。
上下左右で異なる拡大率を指定すると、縦長、横長の拡大縮小ができます。
拡大率に負の値を指定することもできます。 ｘ方向の拡大率を負にすると左右反転、ｙ方向の拡大率を負にすると上下反転になります。
回転
回転は rotate(回転角度, 中心座標X, 中心座標ｙ) で指定します。
<use xlink:href="#名前" x="0" y="0" transform="rotate(45, 10, 10)" />
と書くと、(10,10)を中心に４５度回転します。 この場合も x="0" y="0" として使うのが分りやすいでしょう。
せん断
長方形を左右または上下から押してずらし、平行四辺形に変えるような変換です。
次のように記述します。値は角度です。
transform=skewX(30) transform=skeyY(50)
変換の組み合わせ
translate, scale, rotate などを並べて記述することもできます。 この場合、右側のものから順に適用されます。
transform="translate(100,50) scale(0.5, 0.5)"
とすると、大きさを半分にした後、移動が行われます。
属性 x="数値" y="数値" を指定した場合は、これが先に適用されます。
適用順は
- 属性 x, y
- transform内の右端の変換
- transform内の左にある変換
になります。
変換の順序や合成は行列演算に対応しています。
１次変換の行列
座標を縦ベクトルで表すとき、その１次変換は２×２の行列で表され
により、点（ｘ、ｙ）が点（ｘ’、ｙ’）に移されます。
１次変換では、原点を中心とした拡大縮小、回転、せん断やそれらを組み合わせた変換ができました。
移動は行列を掛けるのではなく、ベクトルの加算に対応しました。
一般に図形の変換は次のように分類できます。
- １）形を変えないもの
- ２）平行線を平行線に移すもの
- ３）直線を直線に移すもの
- ４）曲線を曲線に移すもの
１次変換と移動を組み合わせると２）の範囲の変換になります。
１次変換と移動を同じ計算で行う方法
点（ｘ、ｙ）を３次元のベクトル 
で表すことにします。
１次変換は 
になります。
移動は 
で表せます。
transformとの対応
行列の掛け算に対応するので右から順に処理されるのが分ります。
変換行列を与えてtransformを行うこともできます。
transform=matrix(a,b,c,d,e,f)
と書くと 
の変換行列になります。