Translate/Map SVG 图像元素到 DOM/XML

Question

我正在尝试将 SVG 图像元素运行slate 到它的 xml 文本行。换句话说，如果 (0,0) 处有一个正方形，我想在 SVG 文本文件中找到它对应的 xml 行。

现在，我知道我可以在 svg xml 文件中搜索这些坐标并找到它。但困难在于 t运行sform 和 clipping。这些可能意味着元素的位置在 svg xml 和真实 svg 图像中可能不同。

简而言之，我想做的类似于web-inspector(safari) 功能。但是我想自己实现。我找到了几个关于如何编写 dom 检查员的链接。但是要求 SVG 在每个元素中都具有 onmouseclick 或 onmousehover 功能。 我想做的是，编写一个程序，可以接受任何运行dom svg，一旦选择了一个元素，我就可以得到它对应的 xml 行.

我希望有人能指导我如何去做这件事。

Answer 1

谢谢罗伯特朗森。我从你的帮助中得到了答案。

我按照他的建议使用了'elementFromPoint()'函数。假设程序已经知道要检查哪个坐标 (100,60)；通过在 window.onload() 调用 elemenfrompoint() 我得到了如下答案。

window.onload = function(){
    cord_element = document.elementFromPoint(100,60);
    alert("element is :"+cord_element.id);
}

Translate/Map SVG 图像元素到 DOM/XML

Translate/Map SVG image element to DOM/XML

javascript

xml

jquery

svg

web-inspector