ボタンをクリックしてSVG要素の色を変更する方法は？

Question

トグルクラスをトグルしようとしましたが、これは機能しません。 目的：白い要素があります。ボタンをクリックすると、要素は例えば青色になります。ボタンをもう一度クリックすると、要素が再び白くなります。 テストjQuerysのリリースノートによると、SVGsのクラス操作は、バージョン3.0まではサポートされていなかった3

Answer 1

：https://blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versions-released/

あなたが（またはそれ以降）jQueryの3.0を使用するか場合そのため、それは、動作するはずOR私はここに基本的な例を作った

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

：あなた自身が.attr()メソッドを使用してクラスを操作

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>