我想通过坐标从 SVG 文件获取对象 ID。
例如在
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1"
height="50" width="50">
<rect id="rectRED"
x="15" y="5" height="30" width="30"
style="fill:#ff0000;fill-opacity:0.5;stroke:#000000;stroke-width:1.5" />
<rect id="rectBLUE"
x="5" y="15" height="30" width="30"
style="fill:#0000ff;fill-opacity:0.5;stroke:#000000;stroke-width:1.5" />
</svg>
-
getObjectsAt(10,25)应该返回一个包含的列表rectBLUE
-
getObjectsAt(25,25)应该返回一个包含的列表rectRED and rectBLUE
-
getObjectsAt(10,10)应该返回类似的东西NIL
有办法做到这一点吗？
There's document.elementFromPoint方法，但它只返回最顶层的元素。要获取某个点下的所有元素，您可以找到最上面的一个，将其隐藏并再次查看该点，直到不再有元素为止：
var elementsAt = function( x, y ){
var elements = [], current = document.elementFromPoint( x, y );
// at least one element was found and it's inside a ViewportElement
// otherwise it would traverse up to the <html> root of jsfiddle webiste.
while( current && current.nearestViewportElement ){
elements.push( current );
// hide the element and look again
current.style.display = "none";
current = document.elementFromPoint( x, y );
}
// restore the display
elements.forEach( function( elm ){
elm.style.display = '';
});
return elements;
}
http://jsfiddle.net/duo02d38/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
