svg タグ: transform で図形を操作する

概略

1. HTML の CSS transform を使用する。
2. svg タグの transform 属性 を使用する。

1) HTML の CSS で trasnform

HTML 要素 (img タグや svg タグなど) を CSS trasnform で加工します。
あらかじめ用意された svg 画像ファイルなど固定の画像に適した話です。

• CSS: transform - 変形・回転など

• 1) img 要素でリンクされた svg 画像を CSS transform で回転させる。
  img を CSS transform で回転させます。この場合は、svg 画像は HTML とは別のファイルになります。
• 2) svg 要素を格納している要素を CSS transform で回転させる。
  HTML 内の svg 要素や svg を格納している div 要素に対して CSS transform を指定します。 こちらは HTML 内に svg タグも含んだ話になります。
  CSS transform - 変形・回転など
  

2) SVG の transform 属性を使う

こちらは CSS とはまったく異なる話です。 svg に関するタグ (svg タグや g タグなど) では transform 属性 を設定することができます。 この属性で svg 全体や svg 内で使用している一部のパーツ を変形したり操作したりすることができます。 こちらは固定の画像ではなく svg を使った Web アプリケーションで svg の部品を操作する話に適しています。

例: rotate で回転させる例
<svg transform="rotate(180)" ... >

• MDN: SVG transform 属性

transform の変換では順序依存があるので注意

transform では処理の順番を変えると 同じ結果にならない場合もあるので気をつけてください。 1) 変換 A → 変換 B と 2) 変換 B → 変換 A が同じならない場合があります。

• TestCSS_transform_img2.html
  transform の順番の違いで結果が変わるサンプル。

CSS transform で SVG 図形を加工する (2023/10)

SVG transform 属性 (2023/11)

• MDN: SVG transform 属性

transform 属性を JavaScript で操作する (2023/11)

transform 属性の設定には 2つの方法があります

1. HTML の svg 要素の setAttribute() で文字列で値をセットする。
   transform 属性の値の文字列は translate() や rotate() など多くのパラメータを持つので面倒な話になります。
2. svg 要素から必要な transform のオブジェクトを取り出して値を設定する。
   こちらも transform のリストから適切な transform を探して取り出す (ない場合は追加する、不要なものは削除する) などの処理が必要になります。

• MDN: SVGAnimatedTransformList interface
• MDN: SVGTransformList interface
• MDN: SVGTransform interface

関連: svg 要素の配置座標を変更して移動する (2024/01)

こちらは transform を使わない話です。 svg 要素を div などの親要素に 絶対座標 (CSS の position: absolute;) で配置し、svg の座標を変更することで svg 要素を移動させます。

• svg タグ: JavaScript: ドラッグ操作
  draggable 属性や MouseEvent を使ってドラッグ操作で SVG 図形を移動させる話です。
  

関連

• svg タグ (1)
• svg タグ: JavaScript (1)
• svg タグ: JavaScript: ドラッグ操作
  
• CSS: transform - 変形・回転など
• svg タグ: SVG でグラフを描く