Question

单击“儿童学习中心”的彩色部分按预期工作，但单击文本将返回字母路径对象，我想获取包含文本的多边形

 $("#svg_id > *").click(function () {
   ...do stuff with $(this)
}

问题是多边形的文字“在顶部”有形状，因此当我点击它们时，它们被选中而不是多边形。点击

我需要像svg这样的getParerent。我还可以根据需要编辑svg代码

我尝试使用多边形作为选择器，并且最近使用jQuerys：

$(this).closest('polygon')

并且还搞乱z-index属性但没有成功。该文件是由设计师提供给我的，所以如果有一种方法可以选择以更友好的jQuery格式导出。图像本身是一个有许多形状和层次的平面图。

Answer 1

如果你想在SVG中定位被点击的元素...
您应该使用事件目标。

我不知道你想做什么...
所以我只是在console.log中点击ellemet class和tagname 为了在视觉上更加明显，我将fill颜色更改为青色。

请参阅此CodePen。

$(document).ready(function () {
  $("#Layer_1").click(function (e) {

    var eventTarget = $(e.target);

    var clickedClass = eventTarget.attr("class");
    var clickedTagname = eventTarget[0].tagName;

    console.log("\nA click occured on: " + clickedClass)
    console.log("Which is a: " +clickedTagname);

    // Action if target is not a paths (assuming those are all letters) and is not text
    if( clickedTagname != "path" && clickedTagname != "text"  ){
      eventTarget.css({"fill":"cyan"});
    }

  });
});

在svg上查找最近的多边形

1 个答案: