1. ホーム
  2. ジャバスクリプト

[解決済み】jQuery SVG、addClassができないのはなぜ?

2022-03-31 12:49:06

質問

jQuery SVGを使用しています。オブジェクトにクラスを追加したり削除したりすることができません。誰か私の間違いを知っていますか?

SVGのことです。

<rect class="jimmy" id="p5" x="200" y="200" width="100" height="100" />

クラスを追加しないjQuery。

$(".jimmy").click(function() {
    $(this).addClass("clicked");
});

SVGとjQueryがうまく連動していることがわかるのは できる オブジェクトをターゲットにし、それがクリックされたときにアラートを発生させることができます。

$(".jimmy").click(function() {
    alert('Handler for .click() called.');
});

解決方法は?

2016年編集:次の2つの回答をお読みください。

  • JQuery 3は根本的な問題を解決しています
  • バニラJS element.classList.add('newclass') モダンブラウザで動作する

JQuery(3未満)はSVGにクラスを追加することができません。

.attr() はSVGで動作するので、jQueryに依存したい場合。

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

また、jQueryに依存したくない場合。

var element = document.getElementById("item");
// Instead of .addClass("newclass")
element.setAttribute("class", "oldclass newclass");
// Instead of .removeClass("newclass")
element.setAttribute("class", "oldclass");