Как преобразовать путь в svg так, чтобы он был параллелен исходному расположению?

Question

У меня есть путь, определенный в SVG. Я хотел бы сделать две копии пути и перевести их так, чтобы одна располагалась параллельно оригиналу с одной стороны, а другая - параллельно с другой. Идея состоит в том, чтобы в итоге было 3 пути, все параллельные друг другу и не перекрывающиеся.

Я пробовал простые переводы, такие как transform = "translate (10,10)" и transform = "translate (-10, -10)" для двух путей, но в некоторых путях они заканчивают тем, что пересекали друг друга, не то, что я хочу.

Спасибо.

Answer 1

Ваш ответ должен работать, как вы его предоставили. Вы могли бы предоставить более конкретные примеры вашей проблемы, чтобы найти лучшие решения.

Ваши команды будут перемещать элемент в двух измерениях, а не только в одном.

Кроме того, имейте в виду, что SVG использует верхнюю левую точку как 0,0, а справа / вниз положительные. Также убедитесь, что вас не запутали юниты.

Answer 2

Я дам вам некоторый полностью непроверенный код, написанный без рассмотрения спецификации SVG DOM. Затем вы можете проверить и настроить его, чтобы он заработал.

Сначала получите ограничительную рамку элемента:

var box = mypath.getBBox();

Затем дважды клонируйте путь (или создайте элементы):

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

Затем преобразуйте каждую копию:

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

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

Причина, по которой это выглядит грязно, заключается в том, что в исходном пути уже может быть преобразование.

Затем добавьте эти узлы обратно в DOM:

mypath.parentNode.insertBefore(rightCopy, mypath);

mypath.parentNode.insertBefore(bottomCopy, mypath);

Answer 3

Если ваш исходный путь имеет ограничивающую рамку X, Y, то самый простой способ убедиться, что скопированное не перекрывается, - это перевести на + X и -X, поэтому:

translate(-X, 0)

и

translate(X, 0)

где вы вычислили значение X и задали его в аргументе перевода.