CODEWITHSUNDEEP
javascripthtmlsvg
Alexandre Houmeau
Alexandre Houmeau

Reputation: 21

What is the best way to add SVG in html using javascript?

I have to add a World Map Svg into Html using only Javascript and make it interactive. With the 'mouseenter' on a country the SVG display the name of the country.

I started creating Html tag object in which i linked my 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);
};

The World Map SVG is displaying but now i have issues accessing the id of every path of the SVG. So i was wondering if the method to add the SVG in the HTML was correct.

Here is the link for the SVG : https://upload.wikimedia.org/wikipedia/commons/8/80/World_map_-_low_resolution.svg

Thank you for helping :)

Upvotes: 0

Views: 143

Answers (1)

sriam980980
sriam980980

Reputation: 1978

Created a snippet .

$(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="[email protected]" data-semver="3.2.1" src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Upvotes: 1

Related Questions