スポンサーリンク
スポンサーリンク

グループと図形移動

複数のSVG用をまとめて扱う場合に必要なものはグループ化です。
SVGではg要素を使って要素を囲みます。グループ化すると要素の
スタイルや位置を纏めて扱うことができます。g要素のスタイルは
内包する要素にも継承されます。

サンプルコードの実行結果はこちら

まとめて位置を調整する

g要素によりグループ化するメリットは、スタイルの指定よりも、
纏めて位置を調整できることです。D3.jsでは目盛りを表示することが
多いので、目盛りの線とラベルをグループ化して位置を調整することが
あります。

位置を調整する場合、g要素にtransform属性を指定します。
transform属性に下記の機能を指定できます。

機能 説明
translate(tx,ty) 相対的に位置を移動。例:横方向に20px、縦方向にー50px移動→translate(20px,-50px)
scale(s),scale(sx,sy) 拡大・縮小 例:横3倍、縦5倍→scale(3,5)
rotate(d),rotate(d,cx,cy) 回転。例反時計回りに60度回転→rotate(-60)

コメント

タイトルとURLをコピーしました