SVG
変換

構文

• transform = " [functions] * "
• translate（x [、y]）
• rotate（θ[、x、y]）
• スケール（x [、y]）
• スキューX（θ）
• スキュー（θ）
• 行列（a、b、c、d、e、f）

変換の適用

transform属性を追加することで、要素に適用することができます。

<circle cx="0" cy="0" r="50" transform="translate(50,50)"/>

または<g>タグで囲まれた要素のグループ：

<g transform="translate(50,50)">
<circle cx="0" cy="0" r="50"/>
<circle cx="0" cy="0" r="25" fill="white"/>
</g>

同じ要素にスペースで区切って追加すると、より多くの変換を適用できます。

<circle cx="0" cy="0" r="50" transform="translate(50,50) scale(.5)"/>

変換関数

翻訳

translateは指定されたベクトルに沿ってグラフィックスを移動します：

<circle cx="0" cy="0" r="50" transform="translate(50,50)"/>

最初の値はx変換で、2番目の値はyです。 yを省略すると、デフォルトは0になります。

規模

scale指定された比率で要素のサイズを変更します。

<circle cx="50" cy="50" r="25" transform="scale(.5,2)"/>

translateと同様に、引数はx、yです。しかし、 scaleでは、yを省略すると、デフォルトでxの値になります。つまり、縦横比を変更することなく要素を拡大/縮小します。

回転する

rotate指定された角度だけ要素をrotateせます。

<!-- <rect> used for this example because circles can't be rotated -->
<rect width="100" height="5" transform="rotate(90,50,50)"/>

最初の値は角度（度）です。変換は時計回りに適用されます。他の2つの値は、回転する点を表し、デフォルトは原点です。