如何将事件绑定到svg标签中的元素？

Question

I've got an SVG (it's an nvd3 chart).

Now I need to show a tooltip when the users hovers some text.

My problem is that even if I manually right-click the "text" tag in Google Chrome and choose "Inspect element", it inspects the SVG container instead of the "text" element.

But when I click some "rect" tag, everything works like a charm.

So I can do:

$('rect').mouseover(sth)

and it works, but I cannot do

$('text').mouseover(sth)

because the event is never fired.

When I click the "text" tag, the "click" event is fired on the SVG tag instead of the appropriate one.

My SVG Code:

<svg>
    <g class="nvd3 nv-wrap nv-multiBarHorizontalChart" transform="translate(100,0)">
        <g> 
            <g class="nv-x nv-axis">
                <g class="nvd3 nv-wrap nv-axis">
                    <g>
                        <g class="tick major" transform="translate(0,202.26543209876542)" style="opacity: 1;">
                            <text x="-5" dy=".32em" y="0" style="text-anchor: end; display: block;">Android 3.1</text>
                        </g>
                    </g>
                </g>
            </g>        
        </g>
    </g>
</svg>

Fiddle:

http://jsfiddle.net/BChC9/

When you click the text, it alerts "text", but in my project, it alerts "svg". What could be the cause of it?

Answer 1

If it's only tooltips you need, you could add title elements to the SVG ( try it ):

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="30">
  <text x="10" y="20">
    <title>This is a tooltip</title>
    This is text
  </text>
</svg>