Увеличивайте и уменьшайте масштаб, но держите svg по центру

Question

У меня есть карта мира в формате 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 у меня есть код, который панорамирует и увеличивает, который я нашел в онлайн-учебнике Питера Коллингриджа:

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

Все работает так, как я хочу, кроме одной вещи.Когда я увеличиваю масштаб, Африка «прыгает» вправо, а когда я уменьшаю, он «прыгает» влево.Как можно увеличивать и уменьшать масштаб, когда Африка находится в центре окна просмотра?

Answer 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, чтобы сместить деление на 2 в строках 4 и 5? "Это центрировало его по оси Y, но не по оси X.Итак, я продолжал менять цифры, пока не получил:

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

Теперь он увеличивается, как я и надеялся, сохраняя центр Африки в центре окна просмотра.