Question

我一直在我网站上的各种元素使用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模型（我的svgs非常庞大）：

<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中的 a xlink 元素，但事实证明使用上面的一般方法对于元素不起作用SVG对象。

为什么会这样？

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

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

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

我所做的一切都在努力！我只能假设这个...

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

...无法在SVG文件中找到该元素。

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

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

感谢您的帮助和指导

UPDATE：

我在网上尝试过这种技术，但我不知道我是否这样做是正确的，否则我现在真的抓住了吸管：

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();
};

Fiddle使用上面的代码。

*最新更新

阿!!! （感谢Evan）我犯了这样一个业余的错误，忘了在我的小提琴中加入jquery库!!但这仍然没有解决我的问题！

好的，请查看更新的Fiddle：

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代码是 IN HTML。一旦我将html中的SVG链接为< strong> OBJECT （就像我在我的网站上做的那样）就像这样...

<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它是一个对象吗？

再一次非常感谢

Tooltipster插件用于处理SVG对象文件中的元素

Tooltipster的工作原理：

回到我的svg问题

UPDATE：

*最新更新

0 个答案: