Question

我必须仅使用Javascript将World Map Svg添加到HTML中，并使其具有交互性。在一个国家/地区带有“ 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的每个路径的ID时遇到问题。所以我想知道在HTML中添加SVG的方法是否正确。

这是SVG的链接： https://upload.wikimedia.org/wikipedia/commons/8/80/World_map_-_low_resolution.svg

感谢您的帮助：）

Answer 1

创建了一个代码段。

$(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>

使用javascript在html中添加SVG的最佳方法是什么？

1 个答案: