javascript - jQuery/Javascriptでポイントごとに要素を取得する方法

Question

ページ内のポイント値を指定して要素を取得したい。

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

これにより、ページの正確なポイント位置が返されます。そのポイントには、円、長方形、画像、またはその他の要素のいずれかの SVG 要素が含まれています。ポイントの位置に基づいて要素を取得したい。これは可能ですか？

Answer 1

document.elementFromPoint(x, y);

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

Answer 2

を使用してみませんかdocument.elementFromPoint。

以下のリンクの例は、それがどのように機能するかを示しています。

ポイントごとに要素を取得する

Answer 3

パラメータとして高さと幅が 1 の長方形を使用して、SVG-DOMから getIntersectionList を試すことができるかもしれません。

完全な例:

<?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>