当 SVG 嵌入 HTML 对象标签时，如何让tippy.js 使用单个 svg 元素作为目标？答案

【问题标题】：How to get tippy.js to use individual svg elements as targets when the SVG is embedded in an HTML object tag?当 SVG 嵌入 HTML 对象标签时，如何让tippy.js 使用单个 svg 元素作为目标？
【发布时间】：2019-10-02 08:57:11
【问题描述】：

我使用对象标签在 HTML 中嵌入了一个 svg

<div id="svgDiv">
<object id="svgObjectElement" data="mysvg.svg" type="image/svg+xml">
            Your browser doesn't support SVG.
</object>
</div>

我想使用tippy.js 库为我的svg 中的圆圈提供工具提示，但我似乎无法将mysvg 中的圆圈用作目标。如果 svg 在 HTML 中（比如这个 line 元素），效果很好。

HTML：

<svg height="50" width="50"><line x1="0" y1="0" x2="50" y2="50" style="stroke:tomato;stroke-width:5"></line></svg>
<div id="svgDiv">
<object id="svgObjectElement" data="mysvg.svg" type="image/svg+xml">
            Your browser doesn't support SVG.
</object>
</div>

JavaScript：

tippy('line', {
    content: 'Custom Line Tooltip',
})

我尝试了以下 JavaScript，其中 circle1 是 svg 中圆的 id，但它不起作用：

var svgDocument = document.getElementById("svgObjectElement").contentDocument;
var element = svgDocument.getElementById("circle1");
tippy(element, {
    content: 'Custom circle Tooltip',
});

我也试过

var svgDocumentElement= document.getElementById("svgObjectElement").contentDocument.documentElement;
var element = svgDocumentElement.getElementById("circle1");
tippy(element, {
    content: 'Custom circle Tooltip',
});

这是行不通的。如果相关，我正在使用 Chrome。任何想法将不胜感激。

【问题讨论】：

标签： javascript svg tippyjs

【解决方案1】：

据我了解，Tippy.js 暂时在 body 标记的末尾附加了一个 div 元素，在 body 标记本身内部。 svg 元素的问题在于它们既没有body 标签也不支持div 标签，因此不会出现。见这里：Is it possible to append a div inside an SVG element?

如果 Tippy.js 能够检测到它在 svg 文档中，它可以将 div 包装在 foreignobject 标记内（这很可能会解决问题）。

还有一点需要注意的是，您还必须像 <script xlink:href="../js/tippy.min.js"></script> 一样将 Tippy.js 库直接包含到 svg 文档本身中。但即使那样你也会得到一个错误，因为 Tippy.js 试图引用不存在的元素 head、body 等。

因此，对我来说，解决此问题的最佳方法是在 circle1 对象之外的 circle1 元素上创建覆盖 div，并向该 div 添加工具提示。提示：How to overlay one div over another div

【讨论】：