无法附加到 SVG Circle 元素答案

【问题标题】：Can't append to SVG Circle element无法附加到 SVG Circle 元素
【发布时间】：2014-04-01 21:24:16
【问题描述】：

我查看了几十个类似的主题，但似乎没有一个有效！我的眼睛在流血！

这有点独特。我正在使用 Morris.js 创建折线图。它输出一个 SVG，然后是一堆圆形元素。我想要做的就是将我自己的工具提示附加到圆圈中（我不想使用他们的。）但是工具提示不会附加，或者插入之前，或者预先添加。我之所以阅读是因为 SVG 在 DOM 中未被识别为 HTML。我确实加载了 jquery.svg.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 的内容。

【问题讨论】：

jsfiddle.net/dQLeL 在这里，它被附加到每个元素，但我仍然不知道你将如何使用它:)
那没有附加到任何东西@MiljanPuzović
是的，检查员。
好像有，为什么不显示？
在这种情况下，只需使用 .before() 而不是 .append() jsfiddle.net/dQLeL/1

标签： jquery dom svg jquery-svg

【解决方案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 命名空间。如链接中所述，它对如何呈现其内容有自己的规范。

这就是为什么像这样的东西不会呈现，因为它们不是规则的一部分。

回到你的代码...

您试图在错误的位置呈现工具提示。如果您使用的是 Chrome、Firefox 或 Safari - 您应该习惯使用一个非常有用的“检查”工具。这会告诉您工具提示是在 SVG 之外呈现的，并且是动态更改的。

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

下面是一个示例，可以满足您的需求： http://jsfiddle.net/rZPX5/1/

【讨论】：

感谢您的回复。这适用于第一个标签，但最后一个标签呢。我也对这种方法进行了足够的研究，知道标签都是一样的，只是用新信息更新。因此，如果没有一些严重的黑客攻击，就不可能在没有悬停的情况下让两个标签处于活动状态和可见状态。我只需要一种非常简单的静态方式在图表的开头有一个标签，在图表的末尾有一个标签，无论图表发生什么变化，它都始终保持在这些点之上。
如果您分叉了 Morris.js github 项目并进行了自己的更新，这将很容易实现。您可以包含一个选项“alwaysShow:true”。如果你想破解它。只需创建两个 div 并将它们正确定位...提示：$('circle:first').position()