3

I have an map in SVG, and i like to add a class active when i click on a path. i have the style of map

<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>

the svg map example:

<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 any way to solve this problem?

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
Dennys Ferreira
  • 31
  • 1
  • Why not just allow the click on the tag outside it? – Ted Johnson Jul 07 '15 at 02:29
  • BTW well stated for your first question. – Ted Johnson Jul 07 '15 at 02:36
  • Dennys Ferreira @Ted Johnson: I thought I knew a lot about jquery and about svg, but this whole example is baffling me. What's going on here? I'm seeing not a thing when I create a jsfiddle. Is there a bigger piece to the puzzle I'm just not seeing? – zipzit Jul 07 '15 at 02:39
  • There are several problems 1. Clicking, responded below. 2. No need for closest 3. Given the a tag wrapping it siblings likely is not finding what your are looking for, aka nothing. – Ted Johnson Jul 07 '15 at 03:18
  • Apart from the other problems already mentioned in the comments your biggest issue will be manipulating your SVG with jQuery itself. Because jQuery was designed to handle the HTML namespace, there are serious issues when dealing with SVG. See my [answer](http://stackoverflow.com/a/29805796/4235784) to a similar question for a summary on why `addClass()` and `removeClass()` will not work with SVG. If you are interested in a detailed insight there is a more comprehensive [explanation](http://stackoverflow.com/a/29525743/4235784) available. – altocumulus Jul 07 '15 at 08:39

1 Answers1

0

Why not just allow the click on the tag outside it? 

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

Just tried this out, seems to work fine for detecting clicks that is.

For your function, clearly you will have to tweak the function callback. $(this).find('path');

Ted Johnson
  • 4,315
  • 3
  • 29
  • 31
  • i'm sorry, I think not expressed myself correctly the outside tag call another html page with ajax. My map has 24 paths as above, and each path call another html page with different information. – Dennys Ferreira Jul 07 '15 at 14:23