Class active with svg card
I have a map in SVG and I like to add the class active when I click on the path. I have a map style
<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>
Example svg map:
<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>
and i use this script to change the active class but it doesn't work
<script>
$(function () {
$('#svg-map path').click(function (e) {
e.preventDefault();
$(this).closest('path').addClass('map_active').siblings().removeClass('map_active');
});
});
</script>
So, is there a way to solve this problem?
+3
source to share
1 answer
Why not just click on the tag outside of it?
$('#tocantis').click(function () { alert("replace with your callback"); });
//replace with your function/callback.
Just tried this, it seems to work great for detecting the clicks that are there.
For your function, obviously you will have to customize the function callback. $(this).find('path');
0
source to share