transform属性は、要素に対して2Dまたは3Dの変換を適用するために使用されます。以下に、いくつかの一般的な変換の例とそのコードを示します。
- 平行移動（Translate）: 要素を指定した水平方向と垂直方向に移動させることができます。
<rect x="50" y="50" width="100" height="100" transform="translate(50, 50)" />- 回転（Rotate）: 要素を指定した角度だけ回転させることができます。
<rect x="50" y="50" width="100" height="100" transform="rotate(45)" />- 拡大縮小（Scale）: 要素を指定した倍率で拡大縮小することができます。
<rect x="50" y="50" width="100" height="100" transform="scale(2)" />- スキュー（Skew）: 要素を指定した角度だけ斜めに傾けることができます。
<rect x="50" y="50" width="100" height="100" transform="skewX(30)" />- 行列変換（Matrix Transform）: 要素に複数の変換を同時に適用することができます。
<rect x="50" y="50" width="100" height="100" transform="matrix(1, 0, 0, 1, 50, 50)" />これらは一部の基本的な変換の例ですが、SVGのtransform属性にはさまざまなオプションがあります。詳細な仕様については、SVGの公式ドキュメントやチュートリアルを参照してください。
この投稿では、SVGのtransform属性についての基本的な説明といくつかのコード例を提供しました。これにより、読者は要素の位置や変形を制御するための方法を学ぶことができます。