42008-08-22 04:35:03masahiko32008-08-22 04:33:17masahiko22008-08-22 04:26:57masahiko12008-08-22 04:25:54masahiko

transform属性 描画を行うときに、位置や大きさの変換をtransform属性で指定することができます。 use要素で用いた例です。 ]]>のように書きます。

移動は translate(移動量X, 移動量ｙ) で指定します。 ]]>と書くと、ｘ方向に１０、ｙ方向に２０移動された位置に表示されます。 x="0" y="0" として使うのがほとんどです。 ]]>という方法でも可能です。 拡大縮小や回転と組み合わせて使う場合には、translateを用いる方が分りやすい。

大きさの変更は scale(拡大率X, 拡大率ｙ) で指定します。 ]]>と書くと、ｘ方向ｙ方向とも半分の大きさになります。 原点を基準として拡大縮小されるので x="0" y="0" として使うのがほとんどです。 上下左右で異なる拡大率を指定すると、縦長、横長の拡大縮小ができます。 拡大率に負の値を指定することもできます。 ｘ方向の拡大率を負にすると左右反転、ｙ方向の拡大率を負にすると上下反転になります。

回転は rotate(回転角度, 中心座標X, 中心座標ｙ) で指定します。 ]]>と書くと、(10,10)を中心に４５度回転します。 この場合も x="0" y="0" として使うのが分りやすいでしょう。

長方形を左右または上下から押してずらし、平行四辺形に変えるような変換です。 次のように記述します。値は角度です。

translate, scale, rotate などを並べて記述することもできます。 この場合、右側のものから順に適用されます。 とすると、大きさを半分にした後、移動が行われます。 属性 x="数値" y="数値" を指定した場合は、これが先に適用されます。 適用順は 属性 x, y transform内の右端の変換 transform内の左にある変換 になります。 変換の順序や合成は行列演算に対応しています。

座標を縦ベクトルで表すとき、その１次変換は２×２の行列で表され transform1.png により、点（ｘ、ｙ）が点（ｘ’、ｙ’）に移されます。 １次変換では、原点を中心とした拡大縮小、回転、せん断やそれらを組み合わせた変換ができました。 移動は行列を掛けるのではなく、ベクトルの加算に対応しました。 一般に図形の変換は次のように分類できます。 １）形を変えないもの ２）平行線を平行線に移すもの ３）直線を直線に移すもの ４）曲線を曲線に移すもの １次変換と移動を組み合わせると２）の範囲の変換になります。

点（ｘ、ｙ）を３次元のベクトル transform2.png で表すことにします。 １次変換は transform3.png になります。 移動は transform4.png で表せます。 transformとの対応 行列の掛け算に対応するので右から順に処理されるのが分ります。 変換行列を与えてtransformを行うこともできます。 transform=matrix(a,b,c,d,e,f) と書くと transform5.png の変換行列になります。