CODEWITHSUNDEEP
javascriptjquery
SivaRajini
SivaRajini

Reputation: 7375

How to get element by point in jQuery/Javascript

I want to get an element by specifying the point values in page.

var point = this.svgRenderer.getPoint(serPoint, chart);

This will return exact point location of the page. That point contains some SVG element either circle or rectangle or image or other elements. I want to get the element based on the point location. Is this possible?

Upvotes: 2

Views: 5517

Answers (3)

Markus Kreusch
Markus Kreusch

Reputation: 2121

Maybe you can try getIntersectionList from SVG-DOM using a rectangle with a height and width of one as parameter:

Full example:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100" viewBox="0 0 100 100" onclick="elementsAtEventPosition(event)">
    <script>
        function elementsAtEventPosition(event) {
            var svgRootNode = document.documentElement;
            var rect = svgRootNode.createSVGRect();
            rect.x = event.clientX;
            rect.y = event.clientY;
            rect.width = 1;
            rect.height = 1;
            alert(svgRootNode.getIntersectionList(rect, svgRootNode).length);
        }
    </script>
    <rect x="10" y="10" width="50" height="50" fill="black" stroke="black" stroke-width="1" />
</svg>

Upvotes: 2

Genjuro
Genjuro

Reputation: 7735

why don't you just use document.elementFromPoint.

the example in the link below shows how it works .

get element by point

Upvotes: 3

David Mulder
David Mulder

Reputation: 26980

document.elementFromPoint(x, y);

https://developer.mozilla.org/en-US/docs/DOM/document.elementFromPoint

Upvotes: 9

Related Questions