Question

我有一个有5个孩子的svg＆gt; 1个圆圈和4个路径。每种都有不同的填充颜色。是否有可能了解哪个孩子被点击并返回填充？

像...一样的东西。

$("#svgname").click( function(){
    alert($(clickedchildname).attr("fill"));
 });

谢谢。

更新：

我的代码设置如下......

HTML

<div class="">
    <img src="img/colorsystem/darkblue.svg" height="170" width="170" id="darkblue">
</div>

JS

$("#darkblue").children('g').children().click(function(){
  alert($(this).attr("fill"));
});

SVG

<?xml version="1.0" encoding="utf-8"?>
<svg>
<g id="darkblueholder">
    <circle id="base" class="st0" cx="85.1" cy="84.3" r="71.4"/>

Answer 1

是的，当svg为内联时，可以使用children方法：

$("#svgname").children().click(function(){
  alert($(this).attr("fill"));
});

或由use引用：

<svg height="170" width="170">
   <use id="svgname" xlink:href="img/colorsystem/darkblue.svg#darkblueholder"></use>
</svg>

$($("#svgname").attr("instanceRoot")).children().click(function(){
  alert($(this).attr("fill"));
});

您甚至可以使用.children('path, circle')指定子类型。

可以访问使用img加载的svg树。

使用Jquery查找子SVG节点的填充？

1 个答案: