Relative Positioning Inside an SVG


Sara Soueidan, who else, has written an extensive article on how to mimic relative positioning in an SVG. The gist: nest your SVGs.

Whilst her examples are – as per usual – very extensive and complete, I took the liberty on simplifying her final example:

See the Pen Relative Positioning in SVG by Bramus! (@bramus) on CodePen.

In the simplified example #bird is positioned at x=50%,y=50% of it’s parent #birdwrapper, which itself is positioned at x=698,y=1219 in it’s own enclosing parent, mimicking absolute-relative positioning wich we know from CSS. As an extra visual indicator both #bird and #birdwrapper contain an extra <rect> to visualize their bounding boxes.

Mimic Relative Positioning Inside an SVG with Nested SVGs →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.