делаю вывод подсказок на интерактивную карту, в js новичок, делал вначале svg внутри файла, но позже решил выводить svg через object, и тут уже проблемы, сам объект я получил, а как дальше его передать в код не совсем понимаю
<object data="map.svg" type="image/svg+xml" id="svgmap" width="100%" height="100%"></object>
<div class="map-tooltip"></div>
var svgobject = document.getElementById('svgmap');
var svgdom = svgobject.contentDocument;
var tooltip = document.querySelector('.map-tooltip');
var contents = {};
contents['dom-48-a'] = '<img src="img/1.jpg"><h1>тест</h1><p>тест</p>';
contents['dom-37-9'] = '<img src="img/1.jpg"><h1>тест 2</h1><p>тест 2</p>';
[].forEach.call(svgdom.querySelectorAll('.HI-map'), function(item) {
item.addEventListener('click', function() {
window.open(this.getAttribute('data-link'));
});
item.addEventListener('mouseenter', function() {
tooltip.innerHTML = contents[item.getAttribute('data-tooltip')];
tooltip.style.display = 'block';
});
item.addEventListener('mousemove', function(e) {
tooltip.style.top =
(e.pageY + tooltip.clientHeight + 10 < svgdom.body.clientHeight)
? (e.pageY + 10 + "px")
: (svgdom.body.clientHeight + 5 - tooltip.clientHeight + "px");
tooltip.style.left =
(e.pageX + tooltip.clientWidth + 10 < svgdom.body.clientWidth)
? (e.pageX + 10 + "px")
: (svgdom.body.clientWidth + 5 - tooltip.clientWidth + "px");
});
item.addEventListener('mouseleave', function(){
tooltip.style.display = 'none';
});
});