How to change color of SVG element by clicking a button?

Question

I've tried toggleClass, toggle, but this does not work. The goal: there is a white element. We click a button and element becomes for example blue. We click a button again and element becomes white again. Test 3

Answer 1

According to jQuerys release note, the class manipulation of SVGs wasn't supported until version 3.0: https://blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versions-released/

Therefore, it should work, if you either use jQuery 3.0 (or later) OR you manipulate the classes yourself using the .attr() method:

somejQueryElement.attr('class', 'new-value')

I've made a basic example here:

http://jsfiddle.net/MattDiMu/q67h7bmf/

Answer 2

$(document).ready(function () {
    
        var flag = true; // take a flag here
    
        $(".S1").mouseover(function () {
            if (flag) { // check flag before change
                $(".S1").css('fill', '158844');
                $(".S1").css('stroke', '158844');
            }
        });
    
        $(".S1").mouseout(function () {
            if (flag) { // check flag before change
                $(".S1").css('fill', '#000000');
                $(".S1").css('stroke', '#000000');
            }
        });
    
        $(".S1").click(function () {
            flag = false; // reset flag
            $(".S1").css('fill', '158844');
            $(".S1").css('stroke', '158844');
        });
    
});

<svg>
<line class = "S1" fill="none" stroke="#000000" stroke-width="3.8417" x1="73.208" y1="73.341" x2="99.923" y2="73.341"/>
<polygon class = "S1" points="97.23,82.618 97.176,72.229 97.121,61.843 106.145,66.987 115.169,72.136 106.2,77.377 "/>
</svg>