jquery addClassはsvgで動作しません

Question

私はsvgでいくつかの同じhtmlブロックを持っています。 トグルクラスをクリックして追加したいと思います。このコードは機能しません。 Console.logは呼び出されますが、クラスは追加されません。

$(document).ready(function() { 
     init_svg(); 
     $('.seat').click(function(){ 
      if($(this).hasClass('preorder')){ 
       $(this).removeClass('preorder'); 
       console.log(1); 
      } 
      else{ 
       console.log(2); 
       $(this).addClass("preorder"); 
      }   
     }); 
    }); 

<div class="order" style="top: 260px; right: 370px;"> 
     <svg version="1.1" id="table-4" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" 
     style="transform: rotate(-15deg);" 
     width="100px" height="100px"> 
      <circle class="table" cx="60" cy="60" r="30"></circle> 
      <circle class="seat" cx="28.888" cy="28.884" r="6"></circle> 
      <circle class="seat" cx="17.5" cy="48.608" r="6"></circle> 
      <circle class="seat" cx="17.5" cy="71.384" r="6"></circle> 
      <circle class="seat" cx="28.888" cy="91.108" r="6"></circle> 
      <circle class="seat" cx="48.612" cy="102.497" r="6"></circle> 
      <circle class="seat" cx="71.388" cy="102.497" r="6"></circle> 
      <circle class="seat" cx="91.113" cy="91.109" r="6"></circle> 
      <circle class="seat" cx="102.502" cy="71.385" r="6"></circle> 
      <circle class="seat" cx="102.502" cy="48.609" r="6"></circle> 
      <circle class="seat" cx="91.114" cy="28.883" r="6"></circle> 
     </svg> 
     </div> 

は間違っては何ですか？

Answer 1

JQueryはSVGにクラスを追加できません。

.ATTR（）あなたはこの

// Instead of .addClass("newclass") 
$("#item").attr("class", "oldclass newclass"); 
// Instead of .removeClass("newclass") 
$("#item").attr("class", "oldclass"); 

非常に良い説明がSOのこのスレッドに利用可能であるような何かをしなければならないSVGと連携して動作します。

jQuery SVG, why can't I addClass?