如何从SVG内的路径元素获取X，Y坐标? [英] How to get X,Y coordinates from path element inside SVG?

问题描述

这是实际拥有的小提琴.https://jsfiddle.net/Lofdujwr/

Here is a fiddle of what actually have. https://jsfiddle.net/Lofdujwr/

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

I'm using a library for zoom and pan an SVG svgpanzoom. I have a button when clicked it zooms on spain for example, so I put the coordinates in:

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

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

The problem is when I resize the page that coordinates doens't work anymore I need to recalculate them, I have found a function that might work but I don't know how to use it:

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

函数帖

另一个问题，例如，是否可以从 svg 内的路径 ID 获取坐标?

And another question, is it possible to get coordinates from a path ID inside the svg for example?

似乎我必须从我的 svg 计算实际的 X 和 Y 视口，然后重新计算它，在 0.0 视口上给出我的观点 (x:188, y: 185)，任何人都知道我能看到的例子?

Seems like I have to calculate the actual X and Y viewport from my svg and then recalculate it giving my point (x:188, y: 185) on 0.0 viewport, anyone know any example I can see?

推荐答案

回答实际问题:

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

The plugin you are using is controlling the transforms by changing the matrix of g.svg-pan-zoom_viewport and not the viewBox of the svg.

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

In your function cursorPoint() you keep transforming the mouse-coordinates referring to the svg, yet you discard the underlying transformation on g.svg-pan-zoom_viewport. That is the reason why you are getting different coordinates while the svg is either resized or moved (=transformed).

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

If you refer the coordinates to the g.svg-pan-zoom_viewport instead, you will get consistent results.

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

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

Another way would be to change the viewBox of the svg instead of using the groups matrix. Yet since your plugin works that way, you should go with it.

更新

我玩了一会儿那个链接的插件，对我来说，函数 zoomAtPoint() 做错了.让我们假设链接小提琴中的西班牙在 165:165.现在要不断正确地缩放到该位置，您需要先重置它:

I played around with that linked plugin a bit and for me the function zoomAtPoint() is doing something wrong. Let us assume Spain in the linked fiddle is at 165:165. Now to constantly zoom to that location correctly you need to reset it before:

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

否则该函数要么什么都不做，要么在其他地方缩放.

Else the function either does nothing or zooms somewhere else.

现在获取阿根廷"的坐标并缩放到它:

Now to get the coordinates of "argentinia" and zoom to it:

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/

Working fiddle with example buttons: https://jsfiddle.net/04Lg9ruj/

这篇关于如何从SVG内的路径元素获取X，Y坐标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！