放大和缩小,但将svg居中

时间:2019-02-14 18:20:56

标签: javascript svg zoom

我有一个svg格式的世界地图,并且正在使用视图框来关注非洲。我有两个按钮用于放大和缩小:

<rect class="button" x="75" y="170" onclick="zoom(0.8)" style="width:25px; height:20px; fill:khaki"/>
<rect class="button" x="100" y="170" onclick="zoom(1.25)" style="width:25px; height:20px; fill:khaki"/>

在一个外部.js文件中,我具有平移和缩放的代码,这些代码可以在Peter Collingridge的在线教程中找到:

var transformMatrix = [1, 0, 0, 1, 0, 0];
var svg = document.getElementById('map-svg');
var viewbox = svg.getAttributeNS(null, "viewBox").split(" ");
var centerX = parseFloat(viewbox[2]) / 2;
var centerY = parseFloat(viewbox[3]) / 2;
var matrixGroup = svg.getElementById("matrix-group");

function pan(dx, dy) {
    transformMatrix[4] += dx;
    transformMatrix[5] += dy;
    var newMatrix = "matrix(" +  transformMatrix.join(' ') + ")";
    matrixGroup.setAttributeNS(null, "transform", newMatrix);
}

function zoom(scale) {
    for (var i = 0; i < transformMatrix.length; i++) {
transformMatrix[i] *= scale;
}

    transformMatrix[4] += (1 - scale) * centerX;
    transformMatrix[5] += (1 - scale) * centerY;

    var newMatrix = "matrix(" +  transformMatrix.join(' ') + ")";
    matrixGroup.setAttributeNS(null, "transform", newMatrix);
}

除了一件事,一切都按照我想要的方式工作。当我放大时,非洲“跳”到右边,而当我放大时,非洲“跳”到左边。在非洲停留在视图框中心的情况下,如何放大和缩小?

1 个答案:

答案 0 :(得分:1)

我想我回答了我自己的问题。在第4行和第5行中,定义了centerX和centerY:

var centerX = parseFloat(viewbox[2]) / 2;
var centerY = parseFloat(viewbox[3]) / 2;

然后在第20和21行中使用centerX和centerY:

transformMatrix[4] += (1 - scale) * centerX;
transformMatrix[5] += (1 - scale) * centerY;

我想,“如果我将centerX和centerY乘以2,以在第4和5行中将除以2,该怎么办?”使其居中于Y轴,而不是X轴。因此,我一直在更改数字,直到得到:

transformMatrix[4] += (1 - scale) * (centerX * 4);
transformMatrix[5] += (1 - scale) * (centerY * 2);

现在,它可以按照我希望的那样缩放,将非洲大陆放在视图框的中心。