Add information to a map in SVG

Question

I have a SVG map on my website. I would like to add a div for when the user hovers the mouse over a respective state, it shows the name of it. What happens is that if I include any information within <svg> styles are lost. It can be a div or span above the <a>.

Map I used

My code:

http://jsfiddle.net/felipestoker/g0c64uxw/

I put in Jsfiddle because the code exceeds the limit of snipset characters.

Answer 1

You can select SVG elements normally, as if they were HTML.

I created an example from your example, where it prints in a <h3> the attribute xlink:href of each state. Jsfiddle

I put a class estado-svg in every state and put a Handler of the event mouseenter.

var estados = $(".estado-svg"), // seciona todos o <a> 
    teste = $("#teste"); // seleciona o <h3> para printar os estados

/*
poderia ser usado assim:

$(".estado-svg").on("mouseenter", function(){ ... });

Mas usei delegação de eventos por questões de performance
*/

$("#svg-map").on("mouseenter", ".estado-svg", function(){
    teste.html($(this).attr('xlink:href')); // Printa no <h3> o attributo xlink:href
});

From this example you can already get an idea of how to interact with the elements and use some library.

---

EDIT

That question of Stackoverflow in English answers your question.