javascript - 如何缩放 SVG 绘图

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 8 年前。

Improve this question

如果我有 SVG 格式的 map ，如何将图像缩放到 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 + ")");

这将在 x/y 方向应用“3”的缩放变换，从而使元素变大 3 倍，而不改变其纵横比

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