Изменить SVG Fill Override On Click - jQuery

Question

Я пытаюсь изменить цвет объекта SVG с помощью обработчика события jQuery, но цвет возвращается в нормальное состояние после щелчка.

Смотрите здесь: http://jsfiddle.net/6wwUm/

Как я могу изменить цвет навсегда?

<svg> 
    <line class = "A1" fill="none" stroke="#000000" stroke-width="3.8417" x1="73.208" y1="73.341" x2="99.923" y2="73.341"/> 

    <polygon class = "A1" 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> 

<script> 
    $(document).ready(function() { 
     $(".A1").mouseover(function(){ 
      $(".A1").css('fill', '158844'); 
      $(".A1").css('stroke', '158844'); 
     }); 

     $(".A1").mouseout(function(){ 
      $(".A1").css('fill', '#000000'); 
      $(".A1").css('stroke', '#000000'); 
     }); 

     $(".A1").click(function(){ 
      $(".A1").css('fill', '158844'); 
      $(".A1").css('stroke', '158844'); 
      $("#appearOnAcross").show(); 
      $("#appearOnDown").hide(); 
      alert('jQuery Alert') 
     }); 

    }); 
</script> 

Answer 1

Проблема: mouseout. После clickmouseout происходит сбрасывание ваших цветов.

Решение: Используйте флаг.

Demo: http://jsfiddle.net/abhitalks/6wwUm/1/

JS:

$(document).ready(function() { 

    var flag = true; // take a flag here 

    $(".A1").mouseover(function() { 
     if (flag) { // check flag before change 
      $(".A1").css('fill', '158844'); 
      $(".A1").css('stroke', '158844'); 
     } 
    }); 

    $(".A1").mouseout(function() { 
     if (flag) { // check flag before change 
      $(".A1").css('fill', '#000000'); 
      $(".A1").css('stroke', '#000000'); 
     } 
    }); 

    $(".A1").click(function() { 
     flag = false; // reset flag 
     $(".A1").css('fill', '158844'); 
     $(".A1").css('stroke', '158844'); 
    }); 

});