Question

我有一个SVG（这是一张nvd3图表）。

现在，当用户悬停某些文字时，我需要显示工具提示。

我的问题是，即使我手动右击Google Chrome中的“text”标签并选择“Inspect element”，它也会检查SVG容器而不是“text”元素。

但是当我点击一些“rect”标签时，一切都像魅力一样。

所以我能做到：

$('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”。可能是什么原因？

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>

如何将事件绑定到svg标记内的元素？

1 个答案: