I have an SVG container that serves as my paper that fills the entire page. In this container, I show the elements in a grid.
Say, each shape fills a space of 100 x 100 pixels, and the grid - 500 x 500 pixels. I would like to have a shape in the first cell with the position (0, 0) and one in the last cell with the position (400, 400), etc.
While Snap.SVG allows you to set x and ay (or cx and cy) for shapes such as Paper.rect and Paper.circle, it looks like there are no well-documented ways of Paper elements for Paper.path or a document. Of course, this behavior should be expected, since, as indicated in official documents, Paper.polyline is defined with several variables x and y (and Paper.path does not have one at all). Thus, it makes no sense for me to simply set one x or y and expect the whole figure to move. However, this is problematic as I try to put the same design for Paper.path several times without changing the original String path.
While I found a workaround using Path.polyline, it is suboptimal, especially when scaling the length of my grid. I applied a matching function, which translates each Paper.polyline coordinate to a position in the grid where it should end. I argue that iterating through each coordinate for each printed form is an unnecessarily expensive process and that there should be a way to set global x and y for the whole element.
source
share