Map in SVG in Wordpress

Question

I cannot insert the map(link below) in Wordpress. When I put the code on the page, the states are lined up as attached:

Can someone help me? Tks

Follow code (I didn’t post integer in the snippet because the OS limits the question to 30000 characters):

Online: http://codepen.io/fabiogoodoy/pen/wgipx

function highlight_map_states(){
  if($(".states_section").length>0){
     $(".states_section .list_states .item .link").hover(function(){
       var a="#state_"+$(this).text().toLowerCase();
       $(a).attr("class","state hover")
     },function(){
       var a="#state_"+$(this).text().toLowerCase();
       $(a).attr("class","state")
     })
  }
};

#map {
    display: none;
}

#map .state {
    cursor: pointer;
}

#map .state .shape {
    cursor: pointer;
    -width: 0;
}

#map .state .label_icon_state {
    fill: #fff;
    font-family: Arial;
    font-size: 11px;
    line-height: 12px;
    font-weight: normal;
}

#map .state .label_state {
    display: none;
    font-family: Arial;
    font-size: 14px;
    line-height: 16px;
    font-weight: bold;
}

#map .state:hover .label_state,
#map .state.hover .label_state {
    display: block;
}

#map .model-green .state .shape {
    fill: #6cb361;
}

#map .model-green .state .icon_state {
    fill: #10592f;
}

#map .model-green .state .label_icon_state {
    fill: #fff;
}

#map .model-green .state .label_state {
    fill: #666;
}

#map .model-green .state:hover .shape,
#map .model-green .state.hover .shape {
    fill: #2d68b2;
}

#map .model-green .state:hover .icon_state,
#map .model-green .state.hover .icon_state {
    fill: #5a95ce;
}

#map .model-orange .state .shape {
    fill: #fd7132;
}

#map .model-orange .state .icon_state {
    fill: #6cb361;
}

#map .model-orange .state .label_icon_state {
    fill: #fff;
}

#map .model-orange .state .label_state {
    fill: #666;
}

#map .model-orange .state:hover .shape,
#map .model-orange .state.hover .shape {
    fill: #c93f04;
}

#map .model-orange .state:hover .icon_state,
#map .model-orange .state.hover .icon_state {
    fill: #10592f;
}

#map .model-darkgreen .state .shape {
    fill: #366823;
}

#map .model-darkgreen .state .icon_state {
    fill: #2779c6;
}

#map .model-darkgreen .state .label_icon_state {
    fill: #fff;
}

#map .model-darkgreen .state .label_state {
    fill: #666;
}

#map .model-darkgreen .state:hover .shape,
#map .model-darkgreen .state.hover .shape {
    fill: #4a8c31;
}

#map .model-darkgreen .state:hover .icon_state,
#map .model-darkgreen .state.hover .icon_state {
    fill: #5a95ce;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<svg id="map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="460" height="465" style="display: inline;">
...

</svg>

<br />

Créditos <a href="http://bomnegocio.com" target="_blank">bomnegocio.com</a>

Answer 1

It is likely that the ID #map is already being used by another element on your page and probably already has style rules added, the best alternative is to change the ID (remember not only because of CSS, but because of HTML, never repeat Ids), you can use an ID like #mapa_brasil.

Another thing, avoid the display: inline for these types of elements, prefer the display: inline-block; or display: block;

For example:

<svg id="mapa_brasil" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="460" height="465" style="display: inline-block;">
...

</svg>

and in the CSS:

#mapa_brasil {
    display: none;
}

#mapa_brasil .state {
    cursor: pointer;
}

#mapa_brasil .state .shape {
    cursor: pointer;
    -width: 0;
}

#mapa_brasil .state .label_icon_state {
...