== 変換 ==
transform属性
描画を行うときに、位置や大きさの変換をtransform属性で指定することができます。
use要素で用いた例です。
{{{
}}}
のように書きます。
----
=== 移動 ===
移動は translate(移動量X, 移動量ｙ) で指定します。
{{{
}}}
と書くと、ｘ方向に１０、ｙ方向に２０移動された位置に表示されます。 x="0" y="0" として使うのがほとんどです。
{{{
}}}
という方法でも可能です。
拡大縮小や回転と組み合わせて使う場合には、translateを用いる方が分りやすい。
----
=== 拡大縮小 ===
大きさの変更は scale(拡大率X, 拡大率ｙ) で指定します。
{{{
}}}
と書くと、ｘ方向ｙ方向とも半分の大きさになります。
原点を基準として拡大縮小されるので x="0" y="0" として使うのがほとんどです。
上下左右で異なる拡大率を指定すると、縦長、横長の拡大縮小ができます。
拡大率に負の値を指定することもできます。
ｘ方向の拡大率を負にすると左右反転、ｙ方向の拡大率を負にすると上下反転になります。
----
=== 回転 ===
回転は rotate(回転角度, 中心座標X, 中心座標ｙ) で指定します。
{{{
}}}
と書くと、(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="数値" を指定した場合は、これが先に適用されます。
適用順は
1. 属性 x, y
2. transform内の右端の変換
3. transform内の左にある変換
になります。
変換の順序や合成は行列演算に対応しています。
----
=== １次変換の行列 ===
座標を縦ベクトルで表すとき、その１次変換は２×２の行列で表され
{{attachment:transform1.png}}
により、点（ｘ、ｙ）が点（ｘ’、ｙ’）に移されます。
１次変換では、原点を中心とした拡大縮小、回転、せん断やそれらを組み合わせた変換ができました。
移動は行列を掛けるのではなく、ベクトルの加算に対応しました。
----
一般に図形の変換は次のように分類できます。
. １）形を変えないもの
. ２）平行線を平行線に移すもの
. ３）直線を直線に移すもの
. ４）曲線を曲線に移すもの
１次変換と移動を組み合わせると２）の範囲の変換になります。
----
=== １次変換と移動を同じ計算で行う方法 ===
点（ｘ、ｙ）を３次元のベクトル
{{attachment:transform2.png}}
で表すことにします。
１次変換は
{{attachment:transform3.png}}
になります。
移動は
{{attachment:transform4.png}}
で表せます。
----
transformとの対応
行列の掛け算に対応するので右から順に処理されるのが分ります。
変換行列を与えてtransformを行うこともできます。
transform=matrix(a,b,c,d,e,f)
と書くと
{{attachment:transform5.png}}
の変換行列になります。