Как масштабировать рисунок SVG

Question

Если у меня есть карта в формате SVG, как я могу масштабировать изображение, скажем, в X раз больше? Как бы я этого достиг? Я хочу иметь возможность масштабировать его на основе переменной X, которая, конечно, варьируется

Я изучил это, но я потянул время. Я просто хочу знать, с чего начать.

Answer 1

Для масштабирования SVG-данных вам необходимо использовать масштабное преобразование.

Таким образом, чтобы сделать элемент, например, в 3 раза больше, вы бы использовали:

var mySVG = document.getElementById("mySvgElement");
var scaleCoefficient = 3; //this will make it 3 times bigger in x/y direction
mySVG.setAttribute("transform", "scale(" + scaleCoefficient + "," + scaleCoefficient + ")");

При этом будет применено масштабное преобразование "3" в направлениях x/y, в результате чего элемент будет увеличен в 3 раза без изменения соотношения сторон.

Элементы SVG определяются матрицей преобразования - это то, что векторные фигуры обычно используют для определения перемещения / поворота / размера без изменения фактических данных геометрии SVG самих фигур.