SVG Map on Wordpress

Question

SVG Map on Wordpress

Navigation

#1 by (0 votes)

1

I can not insert the map (link below) into Wordpress. When I put the code on the page, the states are queued as appended:

Cananyonehelpme?Tks

Thefollowingisthecode(IdidnotputintegerinthesnippetbecausetheOSlimitsthequestionto30000characters):

Online: link

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><svgid="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>

svg wordpress

asked by anonymous 11.04.2015 / 21:31

1 answer

The operation could not be performed because OLE DB provider "MSDASQL" for linked server "XYZ" was unable to begin a distributed transaction Access Wifi Device from Android Device

score 0 · Accepted Answer

Likely that ID #map is already being used by another element on your page and you probably already have style rules added, the best alternative is to change the ID (remember not only CSS, but HTML question, never repeat IDs), you can use an ID as #mapa_brasil .

Otherwise, avoid display: inline for these element types, prefer 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 CSS:

#mapa_brasil {
    display: none;
}

#mapa_brasil .state {
    cursor: pointer;
}

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

#mapa_brasil .state .label_icon_state {
...