べにやまぶろぐ

技術寄りの話を書くつもり

SVG 要素のクラス操作は addClass()/removeClass() ではなく attr() で。

バージョン : jQuery 1.11.0

下の fiddle は SVG rect (赤い正方形の) クラス操作の例です。

addClass() を使う

 $("#rect").addClass("selected");

と(クラスを上書くので addClass () と等価ではないですが) attr() を使う

 $("#rect").attr("class", "selected");

をそれぞれ呼びますが、addClass を押しても何も起きません。

SVG 要素のクラス操作は

javascript - jQuery SVG, why can't I addClass? - Stack Overflow

にもポストされていますが attr() でのアクセスが必要のようです。

これも上記の中の回答ママですが、attr() で特定クラスの加減を行うには

// addClass
$('path').attr('class', function(index, classNames) {
    return classNames + ' class-name';
});

// removeClass
$('path').attr('class', function(index, classNames) {
    return classNames.replace('class-name', '');
});

とするのが確かにスマートな感じです。