如何缩放SVG绘图

Question

如果我有一张SVG格式的地图，我怎样才能缩放图像，X倍大？我怎么做到这一点？我希望能够根据X变量进行缩放，这当然是变化的

我已经调查过了，但我已经筋疲力尽了。我只是想知道从哪里开始。

Answer 1

要缩放SVG数据，您需要使用scale transformation.

所以要制作一个元素，例如你要使用的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 + ")");

这将适用于＆＃39; 3＆＃39;在 x / y 方向，从而使元素大3倍而不改变它的宽高比

SVG元素由transformation matrix定义 - 这是矢量形状通常用于定义平移/旋转/大小而不更改形状本身的实际SVG几何数据。