変幻自在！- 移動・回転・拡大縮小

変幻自在！- 移動・回転・拡大縮小 (`transform`属性)

SVGの図形やグループ、テキストは、ただそこに描くだけでなく、動かしたり、大きさを変えたり、回転させたり、傾けたりすることができます。これを実現するのが transform（トランスフォーム＝変形）属性です。この属性を使いこなせば、SVGでダイナミックな表現やアニメーションも可能になります！

`transform` 属性の基本

ほとんどのSVG要素（<rect>, <circle>, <path>, <text>, <g> など）に transform 属性を追加することで、変形を適用できます。この属性の値には、1つまたは複数の「変形関数」をスペースで区切って記述します。

<rect x="10" y="10" width="50" height="50" transform="translate(30,20) rotate(45)" />

上の例では、四角形はまずX方向に30、Y方向に20移動し、その後でその新しい位置で45度回転します。変形は、記述された順序で左から右へと適用されるのが重要なポイントです。

主な変形関数

よく使われる変形関数を見ていきましょう。

`translate(tx [ty])` - 移動

要素を平行移動させます。

tx: X方向の移動量。
ty: Y方向の移動量。省略すると0とみなされます。

`translate` デモ

tx (X移動): 0

ty (Y移動): 0

transform="translate(0, 0)"

{/* Comma added for clarity */}

`scale(sx [sy])` - 拡大縮小

要素を拡大または縮小します。デフォルトの基準点は現在の座標系の原点(0,0)です。

sx: X方向の拡大率。
sy: Y方向の拡大率。省略するとsxと同じ値になり、縦横比を保ったまま拡大縮小します。
値が1なら等倍、1より大きければ拡大、1より小さければ縮小。負の値にすると反転します。

`scale` デモ

sx (X拡大率): 1

sy (Y拡大率): 1

transform="scale(1, 1)"

{/* Comma added for clarity */}

`rotate(angle [cx cy])` - 回転

要素を回転させます。デフォルトの回転中心は現在の座標系の原点(0,0)です。

angle: 回転角度（度単位）。SVGでは通常、正の値が時計回りの回転です。
cx, cy: 回転の中心点のX座標とY座標。省略すると原点(0,0)が中心になります。

`rotate` デモ

angle (角度): 0°

cx (回転中心X): 0

cy (回転中心Y): 0

transform="rotate(0 0 0)"

`skewX(angle)` と `skewY(angle)` - 傾斜

要素を傾けます（せん断変形）。

skewX(angle): X軸に沿って傾けます。Y座標は変わらず、X座標が Y座標 * tan(angle) だけずれます。
skewY(angle): Y軸に沿って傾けます。X座標は変わらず、Y座標が X座標 * tan(angle) だけずれます。

`skewX` / `skewY` デモ

skewX angle: 0°

skewY angle: 0°

transform="skewX(0) skewY(0)"

`matrix(a b c d e f)` - 行列変形

最も一般的な変形方法で、これまでの全ての変形（移動、拡大縮小、回転、傾斜）およびそれらの組み合わせを6つの数値で表現できます。座標 (x, y) は以下のように新しい座標 (x', y') に変換されます：

x' = a*x + c*y + e
y' = b*x + d*y + f

例えば、translate(tx, ty) は matrix(1, 0, 0, 1, tx, ty) と同じです。これは上級者向けですが、非常に強力です。

`matrix` デモ (上級者向け)

a: 1

b: 0

c: 0

d: 1

e (tx): 0

f (ty): 0

matrix(1 0 0 1 0 0)

変形の順序の重要性

transform 属性に複数の変形関数を指定した場合、それらは書かれた順序で左から右へと適用されます。この順序を変えると、結果が大きく異なることがあります。

変形の順序デモ

translate(80,0) rotate(45) と rotate(45) translate(80,0) の違いを見てみましょう。

tx: 80

angle: 45°

1: translate(80,0) rotate(45)

2: rotate(45) translate(80,0)

変形の基準点 (`transform-origin` CSSプロパティ)

scale や rotate といった変形は、デフォルトでは現在の座標系の原点(0,0)を基準（中心）として行われます。この基準点を変更したい場合、CSSの transform-origin プロパティを使うのが便利です。このプロパティはSVG要素に直接適用できます（インラインSVGや<style>タグ内、外部CSSファイルなど）。

transform-origin には、center, top left, 50% 50% (中央), 20px 30px (具体的な座標) などの値を指定できます。

`transform-origin` (CSS) デモ

transform-origin (例: "center", "25px 50%", "top right"):

回転角度: 0°

CSS: #originRect { transform-origin: center; }

SVG transform: transform="rotate(0)"

SVG属性だけで基準点を変えたい場合は、少し工夫が必要です。例えば、回転させたい図形の中心を一度原点(0,0)に移動させ (translate(-cx, -cy))、回転し (rotate(angle))、その後元の位置に戻す (translate(cx, cy)) という手順を踏みます: transform="translate(cx,cy) rotate(angle) translate(-cx,-cy)"。

豆知識 (English/日本語)

Did you know? The order of transformations matters because matrix multiplication, which underlies these geometric transformations, is generally not commutative (i.e., A × B ≠ B × A). Each transformation function can be represented as a matrix, and applying multiple transformations is equivalent to multiplying these matrices in sequence.

知っていましたか？変形を適用する順序が重要なのは、これらの幾何学的変形の基礎となる行列の乗算が一般的に可換ではない（つまり A × B ≠ B × A）ためです。各変形関数は行列として表現でき、複数の変形を適用することは、これらの行列を順番に乗算することに相当します。

まとめ

transform 属性とその変形関数 (translate, scale, rotate, skewX, skewY, matrix) を使うことで、SVG要素の位置、サイズ、向き、形を自由自在に操ることができます。変形の順序や基準点を意識することが、思った通りの結果を得るための鍵となります。

これらの変形は、静的なグラフィックだけでなく、CSSやJavaScriptと組み合わせることでSVGアニメーションを作成する際にも非常に重要な役割を果たします。次のページ「美しい塗り - グラデーションとパターン」では、単色塗りだけではない、より豊かな表現方法を探求します。

このページの要約

日本語

SVGのtransform属性は、要素の移動(translate)、拡大縮小(scale)、回転(rotate)、傾斜(skewX, skewY)といった幾何学的変形を可能にします。最も汎用的なmatrix関数もあります。複数の変形は指定された順序で適用され、この順序が結果に影響します。回転や拡大縮小の基準点はデフォルトで(0,0)ですが、rotate関数の中心点指定やCSSのtransform-originプロパティで変更可能です。

English

The SVG transform attribute enables geometric transformations such as translation (translate), scaling (scale), rotation (rotate), and skewing (skewX, skewY). The versatile matrix function is also available. Multiple transformations are applied in the order they are specified, which affects the outcome. The origin for rotation and scaling defaults to (0,0) but can be changed via parameters in the rotate function or the CSS transform-origin property.

Español

El atributo transform de SVG permite transformaciones geométricas como traslación (translate), escalado (scale), rotación (rotate) e inclinación (skewX, skewY). También está disponible la versátil función matrix. Múltiples transformaciones se aplican en el orden en que se especifican, lo que afecta el resultado. El origen para la rotación y el escalado es (0,0) por defecto, pero se puede cambiar mediante parámetros en la función rotate o la propiedad CSS transform-origin.

中文

SVG的transform属性可实现几何变换，例如平移(translate)、缩放(scale)、旋转(rotate)和倾斜(skewX, skewY)。还提供了通用的matrix函数。多个变换按其指定顺序应用，这会影响最终结果。旋转和缩放的原点默认为(0,0)，但可以通过rotate函数中的参数或CSS的transform-origin属性进行更改。