SVG Positioning

svg position grouping

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.

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

Corey Trager

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

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

Kağan Kayal

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.

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.

It's useful if you want to translate a group of elements with percentages: stackoverflow.com/a/17103928/470117

Are there any drawbacks for using svg instead of g?

draw

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.

sighrobot

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.

why doesn't have a x and y attribute while all other svg tags have it ? it means that position is always absolute in a

open source committees are like that.

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

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

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

Biff MaGriff

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>

SVG Positioning

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US