すべてのSVGグラフィック・エレメントは“transform”属性を持っています。この属性は、エレメントを移動したり変形する目的で、さまざまな値に設定したり、変更したりすることが可能です。変形属性は変形のリストを持っていて、このリストは逆順に適用されます。可能な変形としては次のものがあります。

matrix(<a> <b> <c> <d> <e> <f>)は、エレメントの座標に乗じられる2x3マトリックス（ないし、６桁配列）を定義します。下にある別 の変形に関するコメントを参照すれば、このマトリックスのそれぞれの数の意味がわかります。

translate(<tx> [<ty>])は、エレメント<tx>ユニットをx軸に沿って移動し、エレメント<ty>ユニットをy軸に沿って動かします。フルに６桁の配列では、<tx>と<ty>は、配列の最後の２つの数値です。

scale(<sx> [<sy>])は、<sx>と<sy>のファクターにしたがって、中心点（０，０）からエレメントを拡大・縮小します。もし、<sy>が与えられていない場合には、<sx>と同じであるとみなされます。たとえば、<sx>の値が“0.5”だとすると、エレメントはオリジナルの幅の50％に縮小されます。フルに６桁の配列では、<sx>と<sy>は、配列の最初と４番目の数字となります。

（０，０）以外を中心点にして拡大・縮小を行う場合は、このエレメントを座標軸と平行に移動し、中心点が（０，０）になるようにしてから、拡大・縮小を行います。こうした後に、このエレメントを座標軸と平行に移動し、元の位 置にもどします。たとえば、（150，100）を中心として、あるエレメントを50％縮小する場合には、変形属性を“translate(150 100) scale(.5) translate(-150 -100)”に設定します（逆の順番にしないでください）。

rotate(<rotate-angle>)は、（０，０）を中心点として<rotate-angle>度エレメントを回転させます。たとえば、<rotate-angle>の値が“45”だとすると、エレメントは時計回りに45度回転します。拡大・縮小変形の場合と同様に、座標軸と平行に移動の中に回転を含めることによって、別 の中心点を設定して回転させることも可能です。

skewX(<angle>)は中心点を（０，０）として、エレメントのx軸を<angle>度歪めます。フルに６桁の配列では、ラジアンで表示された<angle>は配列の３番目の数字です。

skewY(<angle>)は中心点を（０，０）として、エレメントのy軸を<angle>度歪めます。フルに６桁の配列では、ラジアンで表示された<angle>は配列の２番目の数字です。

次のフォームで、変形をしたいボックスに異なる数値を入力してください。それからAddボタンをクリックして、その効果 をご覧ください。Resetボタンをクリックすると、入力されている数値がクリアされます。