使用普通javascript围绕中心缩放SVG

我有一个问题，可能是理解SVG中坐标是如何工作的。我有一个javascript函数，可以缩放svg图形，例如：

var g = document.getElementById("graph");
var nm = g.getCTM().multiply(k); //k is the scale factor
g.setAttribute("transform", "matrix(" + nm.a + "," + nm.b + "," + nm.c + "," + nm.d + "," + nm.e + "," + nm.f + ")");

关键是缩放后，中心会略微平移，因此图形会丢失“地理”中心。我如何确定需要哪种翻译来“围绕”图形中心缩放图形

---

谢谢。

您考虑过其他方法吗

如果您只是在svg上进行放大/缩小，则可能更容易进行不同的操作，例如：

不久前我也遇到了同样的问题，最终使用以下方法创建了自己的缩放：

---

基本上，svg包装器使用css转换比例，svg可以很好地进行调整。您甚至可以设置缩放动画。

我认为这更符合我的目的，并且在阅读了帮助链接中的操作方法之后

http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Transforming_the_Coordinate_System#The_scale_Transformation

我将其更改为当鼠标滚轮滚动时，围绕鼠标位置缩放图形

如果有帮助，代码如下（使用SVGPan的setCTM方法）：

---

谢谢你！以前没有听说过jquery.transit。我已经在使用SVGPan，因为它在不同的方面都很好，并且发现了许多其他复杂的实用程序，这些都是必须放弃的。我将SVGPan中的默认代码从translate（p.x，p.y）.scale（z）.translate（-p.x，-p.y）更改为scale（z），因为它工作得更好，至少在我的例子中是这样，但即使这样也不是100%完美的。无论如何，我在回答我的问题，因为我找到了一种更能说服我的方法。干杯

var svgRoot = document.getElementsByTagName("svg")[0];
var g = svgRoot.getElementById("viewport");

var newp = svgRoot.createSVGPoint();
newp.x = evt.clientX;
newp.y = evt.clientY;
newp = newp.matrixTransform(g.getScreenCTM().inverse());

var oldx = newp.x;
var oldy = newp.y;

//z = scale factor
setCTM(g, g.getCTM().translate(-(oldx*(z-1)),-(oldy*(z-1))).scale(z));