CODEWITHSUNDEEP
svg
hsbatra
hsbatra

Reputation: 143

Shift all objects in an SVG down and to the right by a given number of pixels

Is there some kind of a wrapper object in SVG that I can use to shift all objects (lines, polygons, circles, text etc) down and to the right in a simple easy fashion? I realize now that I have not left enough space in the top left corner of my SVG definition.

Maybe there is a margin or padding element in SVG that I can use. Please note that I do not desire to wrap this inside HTML or use CSS trickery to achieve this, but ideally I would like to do this with pure SVG if possible.

Upvotes: 0

Views: 137

Answers (2)

myf
myf

Reputation: 11323

Or you can wrap all root elements of your SVG into <g> element and apply (add) single transform to all its children through it:

<g transform="translate(10, 10)">
  <!-- content -->
</g>

Upvotes: 1

myf
myf

Reputation: 11323

You can either alter the viewBox attribute to reveal different portion of the infinite plane, i.e. changing e.g.

<svg viewBox="0 0 100 100">

to

<svg viewBox="-10 -10 110 110">

will bring extra 10 point rows and columns to top an left, effectively shifting content to bottom right (and shrinking it).

Upvotes: 2

Related Questions