svg - SVG ポジショニング

Question

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

1. 一緒に移動したい要素のグループをどのように配置しますか?
2. 相対位置の概念はありますか? たとえば、その親に相対的

Answer 1

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

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

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

リンク：SVG1.1仕様の例

Answer 2

前の回答に代わる短い方法があります。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 を参照してください。

Answer 3

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