227

I'm having a play with SVG and am having a few problems with positioning. I have a series of shapes which are contained in the g group tag. I was hoping to use it like a container, so I could set its x position and then all the elements in that group would also move. But that doesn't seem to be possible.

  1. How do most people go about positioning a group of elements which you wish to move in tandem?
  2. Is there any concept of relative positioning? e.g. relative to its parent
4

5 回答 5

310

Everything in the g element is positioned relative to the current transform matrix.

To move the content, just put the transformation in the g element:

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

Links: Example from the SVG 1.1 spec

于 2009-01-26T12:33:02.393 回答
83

上一个答案有一个更短的替代方案。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>

这两个矩形是相同的（除了颜色），但父 svg 元素具有不同的 x 值。

请参阅 http://tutorials.jenkov.com/svg/svg-element.html。

于 2012-11-28T19:59:28.267 回答
38

如另一条评论中所述，元素transform上的属性g是您想要的。用来transform="translate(x,y)"移动g周围和里面的东西g会相对于 移动g。

于 2009-02-18T14:32:30.817 回答
26

有两种方法可以对多个 SVG 形状进行分组并定位该组：

正如 Aaron 所写，第一个使用<g>with属性。transform但是你不能只在元素 上使用x属性。<g>

另一种方法是使用嵌套<svg>元素。 

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

这样，#group1 svg 嵌套在#parent 中，并且x=10是相对于父svg 的。但是，您不能transform在元素上使用属性<svg>，这与元素完全相反<g>。

于 2015-05-02T05:50:52.663 回答
1

我知道这很旧，但既不是<svg>组标签也不是<g>解决我面临的问题。我需要调整一个<g>标签的 y 位置，它上面也有动画。

解决方案是同时使用<svg>和<g>标签：

<svg y="1190" x="235">
   <g class="light-1">
     <path />
   </g>
</svg>
于 2020-07-03T18:46:30.777 回答