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

I have an svg with 5 children > 1 circle and 4 paths. Each has a a different fill color. Is it possible to understand which child has been clicked and return the fill?

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

Something like...

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

Thank you.

UPDATE:

My code is set up like this...

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

HTML

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

$("#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"/>

1 个解决方案

#1

Yes, it is possible using children method, when the svg is inline:

是的,当svg是内联时,可以使用children方法:

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

or referenced by 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"));
});

You can even specify child type using .children('path, circle').

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

It is not possible to access svg tree loaded using img.

无法访问使用img加载的svg树。

#1