jQuery を使用して SVG 要素にクラスを追加できないのはなぜですか?

jQuery SVG: addClass ができない問題のトラブルシューティング

jQuery SVG を使用する場合、SVG オブジェクトへのクラスの追加または削除で問題が発生する場合があります。この記事では、原因を調査し、解決策を提供します。

問題:

次のコードを考えてみましょう:

<rect>

オブジェクトをクリックしたときにアラートをトリガーできるようになり、「clicked」クラスを追加します

解決策:

jQuery 3 より前では、SVG 要素へのクラスの追加には問題がありました。ただし、この問題は jQuery 3 で解決されました。さらに、最新のブラウザでは、SVG 要素の標準的な JavaScript classList.add('newclass') メソッドがサポートされています。

代替の jQuery アプローチ:

jQuery を使用したい場合は、次を使用してクラス属性を直接操作できます。 attr():

// Add "newclass"
$("#item").attr("class", "oldclass newclass");

// Remove "newclass"
$("#item").attr("class", "oldclass");

バニラ JavaScript アプローチ:

jQuery への依存関係を回避するには、次のバニラ JavaScript コードを使用します:

var element = document.getElementById("item");

// Add "newclass"
element.setAttribute("class", "oldclass newclass");

// Remove "newclass"
element.setAttribute("class", "oldclass");

以上がjQuery を使用して SVG 要素にクラスを追加できないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。