通过对象使用SVG，不想工作

Question

我在初学者js中在交互式地图上绘制提示，首先在文件内部进行了svg的创建，但后来决定通过object输出svg，并且已经存在问题，我得到了对象本身，但是我没有非常了解如何将其进一步传输到代码中

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