jQuery を使用して SVG 要素にクラスを追加および削除するにはどうすればよいですか?

jQuery SVG: クラスの追加と削除

jQuery SVG でインタラクティブな要素を作成したにもかかわらず、ユーザーがクラスを操作しようとすると問題が発生することがあります。発生する問題は、SVG オブジェクトにクラスを追加または削除できないことです。

問題:

jQuery セレクターとイベント ハンドラーは SVG 要素とシームレスに機能し、次のようなアクションが可能です。クリック時にアラートを表示するなど。ただし、jQuery の addClass メソッドを利用して同じ要素にクラスを追加しようとすると、失敗することがわかります。

解決策:

中心的な問題は、jQuery がクラスを直接変更できないことにあります。バージョン 3 より前の SVG 要素。この制限により、追加および削除には別のアプローチが必要になります。クラス:

jQuery に依存するアプローチ:

addClass と RemoveClass を使用する代わりに、jQuery の attr() メソッドを利用してクラス属性を操作します:

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

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

純粋な JavaScriptアプローチ:

jQuery に依存したくない場合は、JavaScript の setAttribute メソッドを使用して要素の class 属性を直接操作できます:

// Add a new class
var element = document.getElementById("item");
element.setAttribute("class", "oldclass newclass");

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

以上がjQuery を使用して SVG 要素にクラスを追加および削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。