Каков наилучший способ добавить SVG в HTML, используя JavaScript? - PullRequest
Новая
       0

Каков наилучший способ добавить SVG в HTML, используя JavaScript?

0 голосов
/ 24 сентября 2019

Я должен добавить World Map Svg в Html, используя только Javascript, и сделать его интерактивным.С помощью 'mouseenter' в стране SVG отображает название страны.

Я начал создавать HTML-тег object , в котором я связал свой SVG.

WorldMap.prototype.renderWorldMap = function() {
    var elBody = document.querySelector('body');
    var elObj = document.createElement('object');

    elObj.data = "World_map.svg";
    elObj.style.width = '100vw';
    elObj.style.height = '100vh';
    elObj.id = 'svg';

    elBody.appendChild(elObj);
};

Отображается карта мира SVG, но теперь у меня возникают проблемы с доступом к идентификатору каждого пути SVG.Поэтому мне было интересно, если метод добавления SVG в HTML был правильным.

Вот ссылка для SVG: https://upload.wikimedia.org/wikipedia/commons/8/80/World_map_-_low_resolution.svg

Спасибо за помощь:)

1 Ответ

1 голос
/ 24 сентября 2019

Создан фрагмент. 

$(document).ready(()=>{
  
  $.get('https://upload.wikimedia.org/wikipedia/commons/8/80/World_map_-_low_resolution.svg').then((d)=>{
    
    $('.svgmap').append(d.documentElement);
      
  $('.svgmap path[id]').mouseover((e)=>{
    $(e.target).addClass('active').attr('title',$(e.target).attr('id'));
    $('#titlek').css('left',e.clientX).css('top',e.clientY).text($(e.target).attr('id'));
    
  }).mouseout((e)=>{
      $(e.target).removeClass('active');
  })
    
  })
  

})
/* Styles go here */

.active{
  fill:red;
}
#titlek{
  position:fixed;
  background:green;
}
<!DOCTYPE html>
<html>
  <head>
    <script data-require="jquery@3.2.1" data-semver="3.2.1" src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <p id="titlek"></p>
    <object class="svgmap" height="100%" width="100%"  width="50" height="50">
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...