如何将事件绑定到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标签内的元素？

回答

相关问题