Reputation: 143
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
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
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