SVG - Path Click

by Salustiano Silva

HTML

<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;">
    <g class="model-green">
        <desc>Brasil</desc>	<a id="state_ba" class="state" xlink:href="">
			<desc id="description_ba">Bahia</desc>
			<path id="shape_ba" class="shape" d="m 396.7483,280.14568 c 0.71501,-2.34867 2.32435,-8.20598 2.77544,-10.88304 1.06631,-4.36755 3.22976,-8.56454 2.89307,-13.15018 0.24433,-9.74093 0.23297,-19.53715 1.88542,-29.15165 -1.15228,-2.73068 4.27262,-3.15317 1.98097,-5.4068 -1.73917,-0.58345 0.40641,-3.0821 1.62874,-3.43559 1.53619,-0.44426 2.9396,0.42062 4.0554,2.55291 1.73062,0.80718 2.10721,-1.34658 3.44153,-2.3963 1.76038,-3.59872 4.5629,-7.82465 6.35375,-9.78217 -2.85539,-2.53678 -4.39697,-3.48364 -5.47699,-5.95478 -1.15551,-2.64388 -2.51321,-6.38726 -0.69554,-8.62811 0.8232,-1.01486 3.09325,0.53899 3.88851,-0.49791 1.1238,-1.46527 -0.15589,-3.75867 -0.74511,-5.48947 -1.13553,-3.33554 -2.18056,-8.25892 -3.93647,-11.01495 -1.1871,-1.86324 -2.8669,-3.41295 -4.68577,-4.65245 -1.85469,-1.26391 -3.96204,-2.60677 -6.16293,-2.71187 -2.38216,-0.11376 -4.32187,2.50569 -6.51221,3.70588 -2.22637,1.21993 -3.59855,3.30495 -6.73716,3.55179 -2.5361,0.19943 -4.2372,-1.37704 -4.99484,-3.97769 -1.27754,-2.23433 -2.44172,-3.74646 -4.4687,-3.83434 -1.22531,-0.0531 -2.13234,1.21325 -3.13497,1.91584 -1.84821,1.29512 -3.35747,3.05441 -5.28854,4.22383 -2.25784,1.3673 -4.62557,2.88087 -7.24986,3.19641 -4.15038,0.49906 -7.72576,-3.98224 -11.99836,-2.01778 -1.36462,0.62742 -0.32681,2.83249 -0.58534,4.30555 -0.33094,1.88625 -0.65365,3.87203 -1.6678,5.49956 -1.355,2.17451 -3.19835,4.27941 -5.45026,5.51555 -2.29861,1.26176 -5.1901,2.01727 -7.79672,1.71113 -2.61965,-0.30767 -5.09356,-1.52312 -7.08001,-3.18076 -1.74634,-1.45727 -2.82984,-5.60291 -3.86531,-5.62313 -1.87079,-0.0365 -3.74146,7.10626 -5.89576,11.98985 -0.63247,1.43375 3.11949,4.1232 3.31557,6.66498 0.12788,1.65771 -1.66882,3.00996 -1.75071,4.67058...

CSS

#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;
}
.tooltip{
    width:60px;
    height:20px;
    background-color:pink;
    position:absolute;
}

JavaScript

function highlight_map_states() {

    if ($(".states_section").size() > 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")
        })
    }
};

$(function() {
    var $tooltip = $('.tooltip');

    $('path, circle').click(function(e){
        e.preventDefault();
        var t = this.getBoundingClientRect().top,
            l = this.getBoundingClientRect().left;
        $tooltip.css({"top": t + "px", "left": l + "px"}).show();
    });

    $('desc, text').click(function(e){
        e.preventDefault();
    });
});