SVGポジショニング

私はSVGで遊んでいて、ポジショニングにいくつか問題があります。gグループタグに含まれる一連の図形があります。コンテナーのように使用したいと思っていたので、x位置を設定すると、そのグループのすべての要素も移動します。しかし、それは可能ではないようです。

1. ほとんどの人は、一緒に移動したい要素のグループをどのように配置しようとしていますか？
2. 相対配置の概念はありますか？例：親を基準

g要素のすべては、現在の変換行列を基準にして配置されます。

コンテンツを移動するには、変換をg要素に配置するだけです。

<g transform="translate(20,2.5) rotate(10)">
    <rect x="0" y="0" width="60" height="10"/>
</g>

リンク：例からSVG 1.1仕様

前の答えの短い代替案があります。SVG要素は、svg要素をネストすることによってグループ化することもできます。

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <svg x="10">
    <rect x="10" y="10" height="100" width="100" style="stroke:#ff0000;fill: #0000ff"/>
  </svg>
  <svg x="200">
    <rect x="10" y="10" height="100" width="100" style="stroke:#009900;fill: #00cc00"/>
  </svg>
</svg>

2つの長方形は（色は別として）同一ですが、親のsvg要素は異なるx値を持っています。

http://tutorials.jenkov.com/svg/svg-element.htmlを参照してください。

他のコメントで述べたようtransformに、g要素の属性は必要なものです。を使用transform="translate(x,y)"してg周りを移動し、内の物gがに関連して移動しgます。

複数のSVGシェイプをグループ化してグループを配置するには、2つの方法があります。

アーロンが書いたように<g>、transform属性で最初に使用します。ただしx、<g>要素で属性を使用することはできません。

もう1つの方法は、ネストされた<svg>要素を使用することです。

<svg id="parent">
   <svg id="group1" x="10">
      <!-- some shapes -->
   </svg>
</svg>

このように、＃group1 svgは#parentにネストされ、x=10は親svgを基準にしています。ただし、要素にtransform属性を使用することはできません。<svg>これは、<g>要素とはまったく逆です。