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

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-库/

我不久前遇到了同样的问题，最终使用这个创建了自己的缩放： https: //github.com/rstacruz/jquery.transit

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