Snap.SVG: How can I position path objects with (x, y) like we do with circles and rects?

Question

I have an SVG container serving as my Paper that fills the entire page. In this container I am displaying elements in a grid pattern.

Let's say each shape fills a space that is 100 x 100 pixels large, and the grid is 500 x 500 pixels large. I would want to have a shape in the first cell with position (0, 0), and one in the last cell with position (400, 400), etc.

Whereas Snap.SVG allows one to set an x and a y (or cx and cy) for shapes such as Paper.rect and Paper.circle, there do not seem to be well documented ways to do this for Paper.path or Paper.polyline elements. Of course, this behavior should be expected since, as is pointed out in the official docs, Paper.polyline is defined with multiple x and y variables (and Paper.path does not seem to have any at all). As such, it does not make sense for me to merely set a single x or y and expect the entire shape to move. However, this is problematic since I'm trying to position the same design for a Paper.path multiple times in without having to change its original path String.

While I have found a workaround using Path.polyline it is overall suboptimal, especially when scaling up the length of my grid. I applied a mapping function that translates each Paper.polyline coordinate into the position in the grid where it should end up. I wager that iterating through each coordinate for every shape I print is a needlessly expensive process, and that there must be a way to set a global x and y for the entire element itself.

Answer 1

I'm not familiar with snap.svg, but I have to believe it provides the ability to translate an element, i.e. move it to a new x,y location. Typically, moving a path via svg dom, would be such as...

<path transform="translate(myX myY)" d="...." />