変換

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="数値" を指定した場合は、これが先に適用されます。

適用順は

1. 属性 x, y
2. transform内の右端の変換
3. transform内の左にある変換

になります。

変換の順序や合成は行列演算に対応しています。

１次変換の行列

座標を縦ベクトルで表すとき、その１次変換は２×２の行列で表され

により、点（ｘ、ｙ）が点（ｘ’、ｙ’）に移されます。

１次変換では、原点を中心とした拡大縮小、回転、せん断やそれらを組み合わせた変換ができました。

移動は行列を掛けるのではなく、ベクトルの加算に対応しました。

一般に図形の変換は次のように分類できます。

• １）形を変えないもの
• ２）平行線を平行線に移すもの
• ３）直線を直線に移すもの
• ４）曲線を曲線に移すもの

１次変換と移動を組み合わせると２）の範囲の変換になります。

１次変換と移動を同じ計算で行う方法

点（ｘ、ｙ）を３次元のベクトル で表すことにします。

１次変換は になります。

移動は で表せます。

transformとの対応

行列の掛け算に対応するので右から順に処理されるのが分ります。

変換行列を与えてtransformを行うこともできます。

transform=matrix(a,b,c,d,e,f)

と書くと の変換行列になります。