2

我使用对象标签在 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。任何想法，将不胜感激。

4

1 回答 1

0

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

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

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

所以，对我来说，解决这个问题的最佳方法是在对象外部的元素上创建一个覆盖层div，circle1并svg为其添加一个工具提示div。提示：如何将一个 div 覆盖在另一个 div 上

于 2019-08-01T13:25:32.590 回答