javascript - 如何从SVG中的路径元素获取X，Y坐标？

Question

这是实际拥有的东西的 fiddle 。 https://jsfiddle.net/Lofdujwr/

我正在使用一个库来缩放和平移 SVG svgpanzoom 。例如，我有一个按钮，单击它会放大西类牙，因此我将坐标放入:

   $("#spain").on("click", function() {
        panZoom.zoomAtPoint(12, {x: 188, y: 185});
    });

问题是，当我调整页面大小时，坐标不再起作用，我需要重新计算它们，我找到了一个可能有效的函数，但我不知道如何使用它:

var s = instance.getSizes()
var p = instance.getPan()
var relativeX = s.width / 2 / (p.x + s.viewBox.width * s.realZoom)

// After resize
var s = instance.getSizes()
var p = instance.getPan()
var x = (s.width / 2 / relativeX) - s.viewBox.width * s.realZoom
instance.pan({x: x, y: 0})

function post

还有一个问题，是否可以从 svg 内的路径 ID 获取坐标？

编辑:似乎我必须从我的svg计算实际的X和Y视口(viewport)，然后重新计算它，在0.0视口(viewport)上给出我的观点(x:188，y:185)，任何人都知道我可以看到示例吗？

Answer 1

回答实际问题:

您正在使用的插件通过更改 g.svg-pan-zoom_viewport 的矩阵来控制变换。而不是 viewBox svg的.

在你的函数中cursorPoint()你不断地改变鼠标坐标，引用svg ，但您放弃了 g.svg-pan-zoom_viewport 上的基础转换。这就是为什么你在 svg 时得到不同坐标的原因。调整大小或移动(=转换)。

如果您将坐标引用为 g.svg-pan-zoom_viewport相反，您将获得一致的结果。

function cursorPoint(evt){
    pt.x = evt.clientX; pt.y = evt.clientY;
    //return pt.matrixTransform(svg.getScreenCTM().inverse());

    var tGroup = document.querySelector('.svg-pan-zoom_viewport');
    return pt.matrixTransform(tGroup.getScreenCTM().inverse());
}

另一种方法是更改​​ viewBox svg的而不是使用组矩阵。然而，既然你的插件是这样工作的，你就应该采用它。

更新

我玩了一下那个链接的插件，对我来说函数 zoomAtPoint()正在做错事。让我们假设链接 fiddle 中的西类牙为 165:165。现在，要不断正确地缩放到该位置，您需要先重置它:

panZoom.reset();
panZoom.zoomAtPoint(6, {x: 165, y: 165});

否则该函数要么不执行任何操作，要么缩放到其他位置。

现在获取“argentinia”的坐标并缩放到它:

panZoom.reset();

//REM: Apparently the values need some time to adjust after reset() is called, yet is seems to have no callback.
window.setTimeout(function(){
    var tViewport = document.querySelector('g.svg-pan-zoom_viewport');
    var tMatrix = tViewport.transform.baseVal.getItem(0).matrix;
    var tBBox = document.querySelector('#argentina').getBBox();
    var tPoint = {x: (tBBox.x + tBBox.width / 2) * tMatrix.a + tMatrix.e, y: (tBBox.y + tBBox.height / 2) * tMatrix.d + tMatrix.f}

    //REM: Approximate values, I leave the exact calculation up to you.
    panZoom.zoomAtPoint(6, tPoint);
}, 500)

使用示例按钮进行操作: https://jsfiddle.net/04Lg9ruj/