使用纯 JavaScript 围绕中心缩放 SVG答案

【问题标题】：Scale SVG around center with plain javascript使用纯 JavaScript 围绕中心缩放 SVG
【发布时间】：2012-12-01 08:01:59
【问题描述】：

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

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

谢谢。

【问题讨论】：

标签： javascript svg scaling

【解决方案1】：

我认为更符合我的目的，并在有用的链接中阅读了如何做到这一点

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

【讨论】：

【解决方案2】：

您是否考虑过其他方法？

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

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

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

【讨论】：

谢谢！以前没有听说过 jquery.transit。我已经在使用 SVGPan，因为它在不同的方面都非常好，并且发现了许多其他复杂的实用程序不得不丢弃。我将 SVGPan 中的默认代码从 translate(px, py).scale(z).translate(-px, -py) 更改为 scale(z) 因为它工作得更好，至少在我的情况下，但即使这样不是100%完美。无论如何，我正在回答我的问题，因为我找到了一种更能说服我的扩展方式。干杯。