Как связать событие с элементом внутри тега svg?

Question

У меня есть SVG (это диаграмма nvd3).

Теперь мне нужно показать всплывающую подсказку, когда пользователи наводят текст.

Моя проблема в том, что даже если я вручную щелкнул правой кнопкой мыши по тегу «text» в Google Chrome и выбрал «Inspect element», он проверяет контейнер SVG вместо «текстового» элемента.

Но когда я нажимаю тег «rect», все работает как шарм.

Так что я могу сделать:

$('rect').mouseover(sth) 

и она работает, но я не могу сделать

$('text').mouseover(sth) 

поскольку событие никогда не увольняют.

Когда я нажимаю тег «текст», событие «щелчок» запускается вместо тега SVG вместо соответствующего.

My SVG Код:

<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/

При нажатии на текст, он предупреждает "текст", но в моем проекте, он предупреждает "" SVG. Что может быть причиной этого?

Answer 1

Если это только всплывающие подсказки вам нужно, вы можете добавить название элементов в 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>