Работать с SVG через объект, не хочет работать - PullRequest
0 голосов
/ 19 октября 2019

Я рисую подсказки на интерактивной карте, в js новичок сначала сделал svg внутри файла, но позже решил вывести 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';
  });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...