図形の変形による位置

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>

SVG逆引きリファレンス一覧へ戻る