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

User · Answer

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

User · Answer

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    lt g transform  translate 20 2 5  rotate 10   gt       lt rect x  0  y  0  width  60  height  10   gt   lt  g gt    Links  Example from the SVG 1 1 spec

User · Answer

There is a shorter alternative to the previous answer  SVG Elements can also be grouped by nesting svg elements    lt svg xmlns  http   www w3 org 2000 svg    xmlns xlink  http   www w3 org 1999 xlink  gt     lt svg x  10  gt       lt rect x  10  y  10  height  100  width  100  style  stroke  ff0000 fill   0000ff   gt     lt  svg gt     lt svg x  200  gt       lt rect x  10  y  10  height  100  width  100  style  stroke  009900 fill   00cc00   gt     lt  svg gt   lt  svg gt    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

User · Answer

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    lt g transform  translate 20 2 5  rotate 10   gt       lt rect x  0  y  0  width  60  height  10   gt   lt  g gt    Links  Example from the SVG 1 1 spec

User · Answer

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

User · Answer

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    lt g transform  translate 20 2 5  rotate 10   gt       lt rect x  0  y  0  width  60  height  10   gt   lt  g gt    Links  Example from the SVG 1 1 spec

User · Answer

There are two ways to group multiple SVG shapes and position the group     The first to use  lt g gt  with transform attribute as Aaron wrote  But you can t just use a x attribute on the  lt g gt  element     The other way is to use nested  lt svg gt  element      lt svg id  parent  gt      lt svg id  group1  x  10  gt         lt  -- some shapes -- gt      lt  svg gt   lt  svg gt    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  lt svg gt  element  which is quite the contrary of  lt g gt  element

User · Answer

There are two ways to group multiple SVG shapes and position the group     The first to use  lt g gt  with transform attribute as Aaron wrote  But you can t just use a x attribute on the  lt g gt  element     The other way is to use nested  lt svg gt  element      lt svg id  parent  gt      lt svg id  group1  x  10  gt         lt  -- some shapes -- gt      lt  svg gt   lt  svg gt    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  lt svg gt  element  which is quite the contrary of  lt g gt  element

User · Answer

There is a shorter alternative to the previous answer  SVG Elements can also be grouped by nesting svg elements    lt svg xmlns  http   www w3 org 2000 svg    xmlns xlink  http   www w3 org 1999 xlink  gt     lt svg x  10  gt       lt rect x  10  y  10  height  100  width  100  style  stroke  ff0000 fill   0000ff   gt     lt  svg gt     lt svg x  200  gt       lt rect x  10  y  10  height  100  width  100  style  stroke  009900 fill   00cc00   gt     lt  svg gt   lt  svg gt    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

User · Answer

I know this is old but neither an  lt svg gt  group tag nor a  lt g gt  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   lt svg y  quot 1190 quot  x  quot 235 quot  gt      lt g class  quot light-1 quot  gt        lt path   gt      lt  g gt   lt  svg gt

User · Answer

I know this is old but neither an  lt svg gt  group tag nor a  lt g gt  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   lt svg y  quot 1190 quot  x  quot 235 quot  gt      lt g class  quot light-1 quot  gt        lt path   gt      lt  g gt   lt  svg gt

User · Answer

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    lt g transform  translate 20 2 5  rotate 10   gt       lt rect x  0  y  0  width  60  height  10   gt   lt  g gt    Links  Example from the SVG 1 1 spec

[svg] SVG Positioning

Examples related to svg

Examples related to position

Examples related to grouping