如何將事件綁定到svg標籤內的元素？

現在我需要在用戶懸停一些文本時顯示工具提示。

我的問題是，即使我手動右鍵單擊Google Chrome中的「文本」標記並選擇「檢查元素」，它將檢查SVG容器而不是「文本」元素。

但是，當我點擊一些「矩形」標籤時，一切都像一個魅力。

所以我可以做：

$('rect').mouseover(sth)

和它的作品，但我不能做

$('text').mouseover(sth)

，因爲事件從來沒有發射。

當我點擊「text」標籤時，會在SVG標籤上觸發「click」事件而不是合適的標籤。

我的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>

小提琴：

http://jsfiddle.net/BChC9/

當您單擊該文本，它會提醒「文本」，但在我的項目，它提醒「SVG」。可能是什麼原因呢？

來源

2014-01-16 Craft

可以顯示一些代碼，請...？ –

@Sudhir完成... – Craft

看中小提琴？這將有助於理解這些問題。 –

如果它只是提示你需要，你可以添加標題元素的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>

來源

2014-01-16 13:06:23

我需要一個自定義的HTML工具提示。 – Craft

如何將事件綁定到svg標籤內的元素？

回答

相關問題