SVG Positioning

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

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

Answers:

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.

Answers:

There is a shorter alternative to the previous answer. SVG Elements can also be grouped by nesting svg elements:

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

The two rectangles are identical (apart from the colors), but the parent svg elements have different x values.

See http://tutorials.jenkov.com/svg/svg-element.html.

Answers:

There are two ways to group multiple SVG shapes and position the group:

The first to use <g> with transform attribute as Aaron wrote. But you can't just use a x attribute on the <g> element.

The other way is to use nested <svg> element.

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

In this way, the #group1 svg is nested in #parent, and the x=10 is relative to the parent svg. However, you can't use transform attribute on <svg> element, which is quite the contrary of <g> element.

Answers:

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 tag which also had animation on it.

The solution was to use both the and tag together:

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

Answers: