Цвет фона карты SVG должен быть активным черным "# 000"

Question

Я использую эту карту SVG India в своем проекте, при наведении мыши цвета меняются, но мне нужно, если пользователь щелкает по любому состоянию, тогда оно должно перенаправляться на другую страницу, а цвет фона должен быть активен как черный "# 000" этогоState.

http://www.acmearchitectural.com/indiamapsvgfiles/map.html#

Я пытаюсь описать код ниже jquery, но не повезло:

$(document).ready(function(e){  
    $('path[id^="select"]').click(function(){    
        $(this).css('background-color',"#ccc") 
    })
})

, пожалуйста, помогите мне, как я могу решить эту проблему.

Answer 1

У SVG, с которым вы связаны, есть предустановка события для каждого состояния <path id="map_1" onclick="return get_state('map_1');"..., и вы можете использовать его, добавив функцию get_state (вторая опция).

Или используя JQuery для добавления события clickно с правильным селектором map_, а не select (первый вариант).Селектор [id^="...."] означает id starts with "....".

Первый вариант

 $(document).ready(function(e) {
   $('path[id^="map_"]').click(function() {
     $(this).css('stroke', "#ff0000");
   });
 });

Второй вариант

 function get_state(map) {
   $('#' + map).css('fill', '#000000');
   alert(map);
 }

JSFiddle пример

Answer 2

Чтобы изменить цвет фона этого пути, вам нужно установить атрибут fill css

$(document).ready(function(e){  
    $('path[id^="select"]').click(function(){    
        $(this).css('fill',"#000") 
    })
})

При этом в примере, который вы связали, есть события, которые уже устанавливают это значениетак что, если он будет вставлен снова и снова, он вернется к исходному цвету.У вас есть контроль над этими событиями?