javascript - 将 div 移动到 svg map 上的坐标

Question

目前我的页面上有一个 svg map

    <object type="image/svg+xml" data="worldHigh.svg" width="1060" height="800">Your browser does not support SVG</object>

不是当我点亮 map 上的某些路径 id 时，我需要能够将 div 移动到 map 上的那个地方。

我目前有以下返回 x 和 y 坐标的函数。

    function getPosition(element) {
        segments = element.pathSegList;
        return { x: segments.getItem(0).x, y: segments.getItem(0).y };
    }

现在我面临的问题是找到相对于屏幕位置的坐标，这样我就可以在那里移动一个 div。

Answer 1

我可以看到两个选项:

1 - 您可以使用 jQuery ($("object").offset()) 获取对象标记偏移量，并使用其“left”和“top”属性找出对象位置屏幕上。 div 位置是 (left + x, top + y)。

2 - 您可以将对象包裹在一个 div 中，将 div 位置设置为相对位置，然后将所需的 div 移动到内部包裹 div 中，设置 x 和 y 作为其位置。