鼠标移动上去时的动画

path {
    transition: opacity .8s, fill .8s;
}
path:hover {
    opacity: 0.1;
    fill: red;
}

选中多个省份

$(function(){
    var msg = $("#msg");
    var provinces = $("#china path");
    var normalColor = "#aad5ff";
    var selectedColor = "purple";
    var selectedData = [];

    provinces.click(function(){
        var index = provinces.index(this);
        var find = selectedData.indexOf(index);

        if (find === -1) {
            selectedData.push(index);
            $(this).attr("fill", selectedColor);
        } else {
            selectedData.splice(find, 1);
            $(this).attr("fill", normalColor);
        }

        msg.text(selectedData.join(","));
    })
});

只能选中一个省份

$(function(){
    var msg = $("#msg");
    var provinces = $("#china path");
    var normalColor = "#aad5ff";
    var selectedColor = "purple";
    var selectedData = -1;

    provinces.click(function(){
        var index = provinces.index(this);

        provinces.eq(selectedData).attr("fill", normalColor);
        provinces.eq(index).attr("fill", selectedColor);

        selectedData = index;
    })
});