获取给定坐标处的 SVG-Object_s?

kai*_*-dj 5 svg coordinates

我想通过坐标从 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>
Run Code Online (Sandbox Code Playgroud)

  • getObjectsAt(10,25)应该返回一个包含的列表rectBLUE
  • getObjectsAt(25,25)应该返回一个包含rectRED和的列表rectBLUE
  • getObjectsAt(10,10)应该返回类似的东西NIL

有办法做到这一点吗?

paw*_*wel 5

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;
}
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/duo02d38/