@Seganda

Работа с SVG через object?

делаю вывод подсказок на интерактивную карту, в 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';
  });
});
  • Вопрос задан
  • 65 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
AnyChart Иркутск
от 20 000 руб.
PROFI.RU Москва
от 180 000 руб.
Flatstack Казань
от 60 000 до 90 000 руб.