Question

我在SVG中有一张地图，我喜欢在点击路径时添加一个活动的类。我有地图的风格

<style>
#svg-map path{ fill:#cacaca }
#svg-map text{ fill:#fff; font:12px Arial-BoldMT, sans-serif; cursor:pointer }
#svg-map a{ text-decoration:none }
#svg-map a:hover{ cursor:pointer; text-decoration:none; }
#svg-map a path{ fill:#21b2a6 }
#svg-map a:hover path{ fill:#187971 !important;}
#svg-map .circle{ fill:#898989 !important; }
#svg-map a:hover .circle{ fill:#222 !important; cursor:pointer; }
#svg-map .map_active{ fill:#000 }
</style>

svg地图示例：

<a xlink:href="#" id="tocantis" onclick=""><path stroke="#FFFFFF" stroke-width="1.0404" 
stroke-linecap="round" stroke-linejoin="round" d="M289.558,235.641c16.104,0.575,44.973-31.
647,44.835-45.259c-0.136-13.612-17.227-58.446-22.349-66.088c-5.122-7.628-37.905,2.506-37.
905,2.506S234.852,233.695,289.558,235.641z"></path><text transform="matrix
(1 0 0 1 287.0137 188.3208)" fill="#FFFFFF">TO</text></a>

并且我使用此脚本来更改活动类，但它不起作用

<script>

$(function () {

$('#svg-map path').click(function (e) {
    e.preventDefault();
    $(this).closest('path').addClass('map_active').siblings().removeClass('map_active');

});

});
</script>

那么有什么方法可以解决这个问题吗？

Answer 1

为什么不允许点击外面的标签呢？

$('#tocantis').click(function () { alert("replace with your callback"); }); 
//replace with your function/callback.

试过这个，似乎可以正常检测点击次数。

对于你的功能，显然你必须调整函数回调。 $(this).find('path');

使用svg map激活类

1 个答案: