Question

我想知道如果SVG DOM树中的一个元素包含在同一棵树的不同元素中，我将如何提取信息。

在我的情况下，我想在SVG树的不同元素上执行onClick事件。由于SVG图由服务器发出并包含数千个元素，我认为向每个节点注册不同的事件是不可行的。所以我的想法是使用SVG的根节点注册事件，然后从事件的目标确定单击了哪个元素。这到目前为止工作正常。

在下一步中，我想打开一个弹出框，显示有关我单击的SVG元素的信息。当事件来自SVG图像中没有放置元素的区域时，框架不应该打开。

阅读完文档后，我认为使用jQuery方法包含（http://api.jquery.com/contains-selector/）是一个好主意，但是它一直产生错误，我不知道出了什么问题。 ($(svgRoot).find(svgElement).length方法也不起作用。有人知道出了什么问题吗？

以下是jsfiddle中的问题示例：https://jsfiddle.net/gjvaz346/1/

这是SVG图：

<svg id="svg-element" currentScale="1" viewBox="0 0 100 100">  
    <g id="svg-root" transform="scale(0.5)">
        <rect id="blue-rectangle" style='fill:blue;opacity:1' x='10' y='10' width='70' height='40' />
        <rect id="green-rectangle" style='fill:green;opacity:1' x='60' y='30' width='40' height='40' />
    </g>
</svg>

这是事件处理程序方法：

function svgCanvasClicked(evt) {

    var target = evt.target;
    var svgElement = $(target.id);
    var svgRoot = $('#svg-root');

    console.log(target.id);
    console.log(svgRoot.id);

    console.log($(svgRoot).find(svgElement).length);
    console.log($.contains(svgRoot, svgElement));
}

问候

Answer 1

最简单的方法是在click元素上绑定rect事件，但将其委托给svg元素，因此只会绑定一个事件：

$('#svg-element').on('click', 'rect', handler);

然后在handler方法内，this会引用点击的rect;

如何测试另一个元素是否包含SVG元素

1 个答案:

Updated jsFiddle