web-dev-qa-db-ja.com

SVGポジショニング

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

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

G要素内のすべては、現在の変換マトリックスに対して相対的に配置されます。

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

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

リンク： 例 from SVG 1.1仕様

245
Aaron Digulla

前の回答に対するより短い代替案があります。 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を参照 。

54
Kağan Kayal

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

30
codedread

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

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

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

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

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

16
fengshuo