Is there a command to move the whole SVG path to a new position, instead of adding the offsets to each point of the path?
Changing the “x” and “y” attributes of the second “<svg>” element also changes the placement of all included shapes. In contrast to the “<g>” element, the nested “<svg>” elements allow you to change the position of multiple shapes at once.
SVG Path - <path> M = moveto. L = lineto. H = horizontal lineto. V = vertical lineto.
The "moveto" commands. The "moveto" commands (M or m) must establish a new initial point and a new current point. The effect is as if the "pen" were lifted and moved to a new location. A path data segment (if there is one) must begin with a "moveto" command.
The d attribute defines a path to be drawn. A path definition is a list of path commands where each command is composed of a command letter and numbers that represent the command parameters. The commands are detailed below. You can use this attribute with the following SVG elements: <path> , <glyph> , <missing-glyph> .
Thanks to sehe's comment. The solution is: wrap the path into
<g transform="translate(offset_x,offset_y)"></g>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With