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

Question

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 :)

sriam980980 · Accepted Answer · 2019-09-24 14:56:03Z

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>

you can use the idea.. just use native functions instead of jQuery shorthands. like $(document).jquery(selector) should be document.querySelector(selector)

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related