How to transform a path in svg so that it is parallel to its original location?

Question

Hi, I have a path defined in SVG. I would like to make two copies of the path and translate them so that one sits parallel to the original on one side, and the other sits parallel on the other side. The idea is to end up with 3 paths, all parallel to each other and not overlapping.

I have tried simple translations such as transform="translate(10,10)" and transform="translate(-10,-10)" for the two paths, but in some paths they end up crossing each other which is not what I want.

Thanks.

Answer 1

Your answer should somewhat work as you've provided it. You might provide more concrete examples of your problem to evoke better solutions.

Your provided commands are going to move the item in two dimensions, not just one.

Also, keep in mind that SVG uses the upper left point as 0,0, and to the right/down are positive. Also check to make sure you're not getting tripped up by units.

Answer 2

If your original path has a bounding box of X,Y then the simplest way to make sure that the copied don't overlap is to translate by +X and -X, so:

translate(-X, 0)

and

translate(X, 0)

where you have computed the value of X and set it in the translate argument.

Answer 3

I'll give you some completely untested code written without looking at the SVG DOM spec. You can then test it and tweak it to get it to work.

First, get the bounding box of an element:

var box = mypath.getBBox();

Then clone the path twice (or make elements):

var rightCopy = mypath.cloneNode(true); var bottomCopy = mypath.cloneNode(true);

Then transform each copy:

rightCopy.setAttribute("transform", "translate(" + box.width + ",0) " + rightCopy.getAttribute("transform"));

bottomCopy.setAttribute("transform", "translate(0," + box.height + ") " + bottomCopy.getAttribute("transform"));

The reason it looks messy is because the original path might have a transform already on it.

Then add those nodes back into the DOM:

mypath.parentNode.insertBefore(rightCopy, mypath);

mypath.parentNode.insertBefore(bottomCopy, mypath);