図形の変形による位置
SVGで図形の変形による位置を変更するには、transform属性の値にtranslate関数を使用します。
図形の現在の位置から相対的に位置を変更します。
- ※ transform属性は変形を行うための属性でスペースで、区切ることで複数の変形を行うことができます。
構文
translate(X軸の座標, Y軸の座標)引数
| 引数名 | 型 | 初期値 | 説明 | |
|---|---|---|---|---|
| 第一引数 必須 |
X軸の座標 | number | X軸方向の座標（位置）。 | |
| 第二引数 | Y軸の座標 | number | 0 | Y軸方向の座標（位置）。 |
サンプルコードとデモ
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="200" height="150">
<rect width="100" height="100" transform="translate(50, -20)" />
</svg>