在给定的坐标处获取SVG对象？

Question

在给定的坐标处获取SVG对象？

5

我希望通过坐标从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 和 rectBLUE 的列表
getObjectsAt(10,10) 应该返回类似于 NIL 的东西

有没有一种方法可以实现这个目标？

- kai-dj

如果您想得到答案，需要提供更多信息。您使用的是哪种编程语言？您是否使用任何库？ - tsn

主要是这个单一任务 - 所以语言并不重要 - 简单粗暴的脚本也可以。使用PHP会非常好，因为SVG是通过PHP生成的 - 但即使如此，我认为能解决getObjectsAt任务的语言也更加优秀 ;) - kai-dj

1

https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint - pawel

补充一点细节：我生成非周期性图案（即彭罗斯图案）-由许多多边形平铺的大型SVG。现在我想尝试在这些非周期性网格上构建元胞自动机（如康威的生命游戏）。问题是如何获取相邻单元格的颜色 - 我希望通过类似于getObjectAt（x，y）的东西来获得。 - kai-dj

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- pawel · Accepted Answer

有一个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/