Question

我有一个问题，或许可以理解坐标如何工作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 + ")");

关键是缩放后中心略有翻译，因此图形丢失是“地理”中心。如何确定我需要哪个翻译来“围绕”其中心缩放图形？

感谢。

Answer 1

您是否考虑过其他方法？

如果您只是想在svg上放大/缩小，可能更容易做到不同，例如： http://www.cyberz.org/blog/2009/12/08/svgpan-a-javascript-svg-panzoomdrag-library/

前一段时间我遇到了同样的问题，最后用这个创建了我自己的缩放：https://github.com/rstacruz/jquery.transit

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

Answer 2

正如我认为更符合我的目的，并在阅读了如何在有用的链接

中完成后

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

我已将其更改为在滚动滚轮时缩放图形左右鼠标的位置，

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

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));

使用普通javascript在中心周围缩放SVG

2 个答案: