How to add and remove classes when clicking on an SVG path?

Question

How to add and remove classes when clicking on an SVG path?

Navigation

#1 by (1 votes)

2

I'm working with a map of Brazil in SVG, and I need when I click on a state, it adds the "active" class and removes the "active" class from the others. It also has the function of adding the state name to an input.

Example:

<path id="Santa Catarina" class="BR-SC RegiaoSul str1" d="M101205 160059l0 -33 -32 -32 32" />

<script type="text/javascript">
    $(docutment).ready(function() {
        $(".str1").click(function(){
            var state = $(this).attr("id");
            $(".str1").removeClass("active");
            $(this).addClass("active");
            $("input[name=estado]").val( state );
        });
    });
</script>

With jQuery not working of course, I would like to do this in javascript, can anyone help me?

javascript jquery svg

asked by anonymous 04.03.2014 / 14:17

1 answer

Problem with friendly url Insert Android Application inside another Android application

score 1 · Answer 1

An example: here

Later, I edit and explain better how it works, now I'm short on time.

But look there if it was like this?

Any doubt comments aew. Thanks.

EDIT 1

This is the remove code and adds the class:

$('.str1').click(function(ev) {
$('.str1').each(function(){
    var clazz = this.getAttribute("class");
    clazz = clazz.replace("active", "");
    this.setAttribute("class", clazz);
});
ev.target.setAttribute("class", "active " + ev.target.getAttribute("class"));
});

EDIT 2

I updated the previous code to also get the id and add it to input . Here is updated code:

$('.str1').click(function(ev) {
$('.str1').each(function(){
    var clazz = this.getAttribute("class");
    clazz = clazz.replace("active", "");
    this.setAttribute("class", clazz);
});
ev.target.setAttribute("class", "active " + ev.target.getAttribute("class"));        
var estado = ev.target.getAttribute("id"); // sem jquery
/* ou */
//var estado = $(ev.target).attr('id'); // com jquery
$('#estado').val(estado);
});

I updated the example as well.