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.