7

我有一个问题可能很好地理解坐标在 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 + ")");

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

谢谢。

4

2 回答 2

3

您是否考虑过其他方法？

如果您只是在 svg 上寻找放大/缩小，则以不同的方式进行操作可能更容易，例如： http ://www.cyberz.org/blog/2009/12/08/svgpan-a-javascript-svg- panzoomdrag库/

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

您基本上将 css 变换比例用于 svg 包装器，并且 svg 可以很好地调整。您甚至可以为缩放设置动画。

于 2012-12-14T12:55:29.140 回答
3

我认为更适合我的目的，并且在阅读了有用的链接中的操作方法之后

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));
于 2012-12-16T21:20:22.293 回答