Question

我有多个SVG元素在不同的组中。它们相互重叠。例如：

<svg id="board" width="100%" height="80%">
   <g id="terrain" class="layer">
     <path d="M-32,-32L32,-32 32,32 -32,32Z" transform="translate(0, 0)" class="mote terrain hill"></path>
   </g>
   <g id="guy" class="layer">
     <path d="M-21...Z" transform="translate(192, 448)" class="mote guy"></path>
   </g>
</svg>

当点击与两者匹配的x，y位置时，我想知道所有这些都被点击了。如果我将每个绑定到'click'事件，则只调用顶部的事件处理程序。这是合理的，虽然不是我想要的。

我正在考虑创建一个最顶层并抓住所有点击，然后找出应该通知其他层中的哪些元素。如果可能的话，这是我想要避免的大量跟踪。有更简单的方法吗？

Answer 1

来自SVG spec

“默认情况下，不能在形状的剪切（不可见）区域上调度指针事件。例如，半径为10的圆被剪裁为半径为5的圆不会接收较小半径之外的“点击”事件。更高版本的SVG可以定义新属性，以便对命中测试和裁剪之间的交互进行细粒度控制。“

但是，有一种方法可以获得在特定点相交的svg形状列表。 “getIntersectionList”函数返回项列表。

我创建了其中一个jsfiddle事物jsfiddle.net/uKVVg/1/点击圆圈的交叉点以获取ID的列表。手动将事件发送到该列表。

Javascript如下：

function s$(a) {
    return document.getElementById(a);
}

var list 

function hoverElement(evt) {
    var root = s$("canvas");

    var disp = s$("pointer");
    disp.setAttribute("x",evt.clientX);
    disp.setAttribute("y",evt.clientY);

    rpos = root.createSVGRect();
    rpos.x = evt.clientX;
    rpos.y = evt.clientY;
    rpos.width = rpos.height = 1;
    list = root.getIntersectionList(rpos, null);
    s = "clicked: "
    $.each(list,function(item,val){
        if (val.id != "pointer") {
            s = s + (val.id) + " ";
        }
    })
    alert(s);
}

var root = s$("canvas");
root.addEventListener("click", hoverElement, false);

有一些javascript可能会被整理，但希望它能回答你的问题。

如何将点击事件映射到多个图层中的元素？

1 个答案: