SVG 地图 onclick 背景颜色应为黑色“#000”答案

【问题标题】：SVG map onclick background color should active black "#000"SVG 地图 onclick 背景颜色应为黑色“#000”
【发布时间】：2018-06-05 18:36:25
【问题描述】：

我在我的项目中使用这个 SVG 印度地图，鼠标悬停颜色正在改变，但我需要如果用户点击任何状态，那么它应该重定向到其他页面并且背景颜色应该激活为黑色“#000”状态。

我正在尝试下面的 jquery 代码，但没有运气：

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

请帮助我解决这个问题。

【问题讨论】：

【解决方案1】：

要更改该路径的背景颜色，您需要设置填充 css 属性

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

话虽如此，在您链接的示例中，有些事件已经在设置此值，因此如果将鼠标悬停并移出，它将重置为原始颜色。你能控制这些事件吗？

【讨论】：

【解决方案2】：

您链接的 SVG 为每个州 <path id="map_1" onclick="return get_state('map_1');"... 预设了一个事件，您可以通过添加 get_state 函数（第二个选项）来使用它。

或者使用 JQuery 添加点击事件，但使用正确的选择器 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);
 }

【讨论】：