文章/答案/技术大牛

发布

社区首页 >问答首页 >如何测试SVG元素是否由另一个元素包含

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

Stack Overflow用户

提问于 2016-01-20 12:14:38

回答 1查看 1.8K关注 0票数 0

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

在我的例子中，我希望在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));
}

问候

javascript

jquery

html

svg

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-01-20 12:31:21

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

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

然后在handler方法中，this将引用单击的rect；

Updated jsFiddle

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34899816

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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