查找最近的多边形SVG的

https://codepen.io/jriggs/pen/YVPvwv 查找最近的多边形SVG的

点击的“儿童学习中心”有颜色的部分工作正常，但是点击文本返回信道的对象，我想包含文本的多边形

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

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

我需要一些像getParerent svg。我还可以编辑如果需要

我曾尝试使用多边形作为选择的SVG代码，也jQuerys最接近：

$(this).closest('polygon')

而且也没有成功的z-index属性搞乱。该文件是由设计师给我的，所以如果有一种方式可以用更适合jQuery的格式导出，这可能是一个选项。图像本身是一个有许多形状和图层的平面图。

来源

2017-04-14 jriggs

请发送一个完整的例子，或一个CodePen。 –

完整的例子是什么？ – jriggs

喜欢让我看到HTML ...我怎么能告诉你为什么'.closest'不起作用？文字是否至少是一个孩子？ –

如果您想要定位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"}); 
    } 

    }); 
});

来源

2017-04-14 18:59:03

这有同样的问题。点击房间内的一封信，它会改变该字母的填充颜色。我只想要更新房间的多边形颜色。如果点击多边形内的字母，则更新包含的多边形颜色。 – jriggs

你将不得不给一个特定的类来''路径'是字母。然后使用'if'条件，你可以过滤它们。有些“路径”不是字母......所以...没有选择。 –

假设所有的路径都是字母，我将如何实现这一目标？ – jriggs

查找最近的多边形SVG的

回答

相关问题