Как заставить tippy.js использовать отдельные элементы svg в качестве целей, когда SVG встроен в тег объекта HTML? - PullRequest
Новая
       25

Как заставить tippy.js использовать отдельные элементы svg в качестве целей, когда SVG встроен в тег объекта HTML?

0 голосов
/ 15 мая 2019

У меня есть svg, встроенный в HTML с использованием тега объекта 

<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 (например, в этом элементе строки), он прекрасно работает.

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, но он не работает: 

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, если это актуально. Любые идеи будут оценены.

...