无法附加到SVG Circle元素

Question

我看过几十个类似的话题，但似乎都没有用！我的眼睛在流血！

这有点独特。我正在使用Morris.js来创建折线图。它输出一个SVG，然后输出一堆圆形元素。我想做的就是将我自己的工具提示附加到圆圈（我不想使用它们。）但工具提示不会附加，或插入之前或前置。我读过因为SVG在DOM中不被识别为HTML。我确实加载了jquery.svg.js.

JS

$(document).ready(function(){
    $('#firstTooltip').appendTo('<circle />');
});

HTML

<div id="tooltips" class="center">
<div id="firstTooltip" class="tooltip fs">Last Intake</div>
<div id="lineGraph" class="center ptm"></div>
</div>

lineGraph div是Morris.js数据输入并填充SVG的内容。

Answer 1

你有一些问题。

首先，您要附加到新创建的圈子中：

$('#firstTooltip').appendTo('<circle />');

应该是

$('#firstTooltip').appendTo('circle');

附加到所有圈子。 jQuery documentation上的appendTo示例应该告诉你这个。

但这也不是有效的，因为SVG是作为嵌入在XHTML文档中的XML实现的。您会注意到SVG中的根元素：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" ...>

SVG有自己的XML NameSpace。其中有关于如何呈现其内容的自己的规范，如链接中所述。

这就是为什么事情不会呈现，因为它们不是规则的一部分。

回到你的代码......

您尝试将工具提示呈现在错误的位置。如果您正在使用Chrome，Firefox或Safari，那么有一个非常有用的＆＃34;检查＆＃34;你应该习惯使用的工具。这将告诉您工具提示在SVG之外呈现，并动态更改。

此外， exploring the documentation ，在您访问StackOverflow之前应该检查一下，您会找到 hoverCallback 选项。还有标签选项。让您能够通过库自定义工具提示，而不是试图破解它。

以下是一个展示两者的示例，以满足您的需求为准： http://jsfiddle.net/rZPX5/1/