jQuery が SVG クラスを操作しないのはなぜですか?それを修正するにはどうすればよいですか?

jQuery SVG: クラス操作の障害を克服する

SVG 操作に jQuery を組み込むと、開発を効率化できます。ただし、よく遭遇する落とし穴は、SVG 要素にクラスを追加または削除できないことです。問題を詳しく調べて解決策を探ってみましょう。

問題:

jQuery を使用して SVG 要素内のクラスを操作しようとすると、失敗することがよくあります。たとえば、次のコードを考えてみましょう:

<svg>
  <rect></rect></svg>

この例では、jQuery コードは、クリックされたときに四角形に「clicked」クラスを追加する必要があります。しかし、それは失敗します。

解決策:

1. JQuery 3 以降を使用します:

JQuery 3 より前のバージョンでは、SVG クラスを操作するときに問題が発生しました。ただし、この問題は JQuery 3 以降では解決されています。最新の JQuery バージョンにアップグレードすると、問題が解決されるはずです。

2.バニラ JavaScript を使用する:

JQuery に依存したくない場合は、バニラ JavaScript を使用して SVG クラスを直接操作できます。 classList.add() メソッドは、これを実現する便利な方法を提供します。

var element = document.getElementById("p5");
element.classList.add("clicked");

3. .attr() メソッドを活用する:

もう 1 つのオプションは、jQuery とバニラ JavaScript の両方と互換性のある .attr() メソッドを使用することです。

// jQuery
$("#p5").attr("class", "clicked");

// Vanilla JavaScript
element.setAttribute("class", "clicked");

これらのソリューションの 1 つを使用すると、jQuery またはバニラ JavaScript を使用して SVG 要素内のクラスを効果的に操作でき、以前の制限を克服できます。

以上がjQuery が SVG クラスを操作しないのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。