SVG Positioning

Question

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

Serrated

Not 100% sure this is good practice, but a solution that worked for me: put the <g> into <defs> section of svg, then render it with <use>. Unlike <g>, <use> allows position attributes. – Milda

Answer 1

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

Relent

Yes, that works. If element attributes get in % ratio then perfectly position will occur. – Clicker

Answer 2

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.

Opponent

Right, the SVG element can be a grouping element as well. I wanted to point out that the SVG element implements clipping by default (at least at the moment in Chrome). This means any overflow will not be visible. Unlike the "g" element. Just set overflow="visible" and you're back in business, if this bites you. – Physics

It's useful if you want to translate a group of elements with percentages: https://mcmap.net/q/111065/-how-to-translate-an-svg-group-by-a-percentage-of-the-viewport – Cheesy

Are there any drawbacks for using svg instead of g? – Georginegeorglana

@Georginegeorglana Performance! <svg> creates a full context for clipping etc and requires more memory than <g> per element created. Use nested <svg> only if you need it, stick to <g> otherwise – Ganiats

Answer 3

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.

Fond

Answer 4

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.

Rosinarosinante

why <g> doesn't have a x and y attribute while all other svg tags have it ? it means that position is always absolute in a <svg>... no relative position, – Simpkins

open source committees are like that. – Indication

I agree... it seems like a bad design choice. Simply incrementing a group's X-transform requires writing a potentially complicated string and storing all the variables somewhere else – Shugart

@user1952009: there’s a chance — just a chance — that you don’t actually understand the design choices that went into SVG. – Troglodyte

@MuhammadUmer if you found something which could be improved, then talk to them. Why not talk to them? – Sheath

<g> is for grouping. It doesn't represent any shape on its own so it wouldn't make sense for it to have a location or a size. It makes sense to have a transform attribute though, which you can read like "apply this transform to the whole group". – Week

Answer 5

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>

Quarta