SVG Positioning

Viewed 260171

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
5 Answers

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

As mentioned in the other comment, the transform attribute on the g element is what you want. Use transform="translate(x,y)" to move the g around and things within the g will move in relation to the g.

I know this is old but neither an <svg> group tag nor a <g> fixed the issue I was facing. I needed to adjust the y position of a <g> tag which also had animation on it.

The solution was to use both the <svg> and <g> tag together:

<svg y="1190" x="235">
   <g class="light-1">
     <path />
   </g>
</svg>
Related