3

我一直在为我的网站上的各种元素使用Tooltipster插件（顺便推荐这个插件），我决定我想在 SVG 对象文件中的元素上使用它，但事实证明这更多比最初想象的要难。

所以在我的html页面上，我有对象：

<object style="width:100%; height:auto;" class="navmap" type="image/svg+xml" data="location.svg">
Stop using that old-ass Internet Explorer XD!!
</object>

为了这个问题，一个简单的 SVG 模型（我的 svg 很大）：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="377.7px" height="377.7px" viewBox="0 0 377.7 377.7" enable-
background="new 0 0 377.7 377.7" xml:space="preserve">


<g>
    <circle fill="#898989" cx="188.85" cy="188.85" r="188.85"/>
</g>


<a xlink:href="#" target="_top" title="Give that circle a tooltip" 
class="tooltip">
    <g>
        <circle fill="#231F20" cx="186.2" cy="192.01" r="82.5"/>
    </g>
</a>

</svg>

Tooltipster 的工作原理：

对于那些不熟悉 tooltipster 的人，您所要做的就是为 tooltipster 插件分配一个类或 id，如下所示：

<img src="my-image.png" class="tooltip" title="This is my image's 
tooltip message!" />

$(document).ready(function() {
        $('.tooltip').tooltipster();
});

并且 Tooltipster 将使用元素的 title 属性作为工具提示，如上所示，或者您可以使用 javascript 生成工具提示消息：

<img src="my-image.png" class="tooltip" />

$('.tooltip').tooltipster({ content: 'This is my image's 
tooltip message!' });

死简单！

回到我的 svg 问题

所以我试图让 tooltipster 插件在我的 svg 中的 xlink元素上工作，但事实证明，使用上面的这些通用方法不适用于SVG object 中的元素。

为什么是这样？

首先，我是否需要像这样在 SVG 文件中链接我的 javascript 文件（就像使用外部样式表一样）...

<script xlink:href="js/scripts.js" />

...为了让它使用javascript（和tooltipster插件）？但是我已经尝试过了，但它不起作用，但由于到目前为止还没有任何效果，我想知道是否需要链接到我的外部 js文件？注意：我已将 tooltipster 插件放入我的外部 js 文件中 - scripts.js

我做什么都没有用！我只能假设这...

$(document).ready(function() {
        $('.tooltip').tooltipster();
});

...在 SVG 文件中找不到元素。

我整理了一个简单的FIDDLE - 请看一下。

我已经在线完成了我的研究，并且没有任何与使用-Tooltipster 插件的 SVG 对象中元素的工具提示相关的帖子和​​其他人查询的“解决方案”不适用于我的情况。

感谢您的帮助和指导

更新：

我已经尝试过在网上找到的这种技术，但我不知道我这样做是否正确，否则我现在真的抓着稻草：

window.onload=function() {
// Get the Object by ID
var svg = document.getElementById("circle-svg");
// Get the SVG document inside the Object tag
var svgDoc = svg.contentDocument;
// Get one of the SVG items by ID;
var circle = svgDoc.getElementById("tooltip");
// Set the colour to something else
circle.tooltipster();
};

使用上面的代码小提琴。

*最近更新

啊！！！（感谢 Evan）我犯了一个业余错误，忘记在我的小提琴中包含 jquery 库！但这仍然没有解决我的问题！

好的，请查看更新的小提琴：

HTML：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="377.7px" height="377.7px" viewBox="0 0 377.7 377.7" enable-
background="new 0 0 377.7 377.7" xml:space="preserve">


<g>
    <circle fill="#898989" cx="188.85" cy="188.85" r="188.85"/>
</g>


<a xlink:href="#" target="_top" title="Give that circle a tooltip" 
class="tooltip">
    <g>
    <circle fill="#231F20" cx="186.2" cy="192.01" r="82.5"/>
    </g>
 </a>

JS：

$('.tooltip').tooltipster();

正如您在小提琴中看到的那样，工具提示现在可以 100% 正常工作（这是因为 SVG 代码在HTML 中。一旦我将 SVG 链接到我的 html 中作为对象（就像我在我的网站上所做的那样）像这样...

<object style="width:100%; height:auto;" class="navmap" 
type="image/svg+xml" data="location.svg">
Stop using that old-ass Internet Explorer XD!!
</object>

...工具提示不起作用！我错过了什么？如何让 javascript 为上面的 xlink 中的 title 属性工作？我需要将 javascript 放在我的 SVG 文件中吗？既然它是一个对象，我是否需要以某种方式 GetelementsbyID ？

再次感谢您的帮助

4

0 回答 0