jQuery 3 没有这个问题
the jQuery 3.0 revisions 上列出的更改之一是：
添加 SVG 类操作（#2199、20aaed3）
此问题的一个解决方案是升级到 jQuery 3。效果很好：
var flip = true;
setInterval(function() {
// Could use toggleClass, but demonstrating addClass.
if (flip) {
$('svg circle').addClass('green');
}
else {
$('svg circle').removeClass('green');
}
flip = !flip;
}, 1000);
svg circle {
fill: red;
stroke: black;
stroke-width: 5;
}
svg circle.green {
fill: green;
}
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<svg>
<circle cx="50" cy="50" r="25" />
</svg>
问题：
jQuery 类操作函数不适用于 SVG 元素的原因是 3.0 之前的 jQuery 版本对这些函数使用 className 属性。
cur = elem.nodeType === 1 && ( elem.className ?
( " " + elem.className + " " ).replace( rclass, " " ) :
" "
);
这与 HTML 元素的预期行为一样，但对于 SVG 元素 className 有点不同。对于 SVG 元素，className 不是字符串，而是SVGAnimatedString 的一个实例。
考虑以下代码：
var test_div = document.getElementById('test-div');
var test_svg = document.getElementById('test-svg');
console.log(test_div.className);
console.log(test_svg.className);
#test-div {
width: 200px;
height: 50px;
background: blue;
}
<div class="test div" id="test-div"></div>
<svg width="200" height="50" viewBox="0 0 200 50">
<rect width="200" height="50" fill="green" class="test svg" id="test-svg" />
</svg>
如果您运行此代码，您将在开发者控制台中看到类似以下内容。
test div
SVGAnimatedString { baseVal="test svg", animVal="test svg"}
如果我们像 jQuery 那样将 SVGAnimatedString 对象转换为字符串，我们将得到 [object SVGAnimatedString]，这就是 jQuery 失败的地方。
jQuery SVG 插件如何处理这个问题：
jQuery SVG 插件通过修补相关函数以添加 SVG 支持来解决此问题。
function getClassNames(elem) {
return (!$.svg.isSVGElem(elem) ? elem.className :
(elem.className ? elem.className.baseVal : elem.getAttribute('class'))) || '';
}
此函数将检测元素是否为 SVG 元素，如果是，它将使用 SVGAnimatedString 对象的 baseVal 属性（如果可用），然后再使用 class 属性。
jQuery 在这个问题上的历史立场：
jQuery 目前在他们的Won’t Fix 页面上列出了这个问题。这是相关部分。
SVG/VML 或命名空间元素错误
jQuery 主要是一个用于 HTML DOM 的库，因此大多数与 SVG/VML 文档或命名空间元素相关的问题都超出了范围。我们确实尝试解决“渗透”到 HTML 文档的问题，例如从 SVG 冒出的事件。
显然 jQuery 认为完全 SVG 支持超出了 jQuery 核心的范围，并且更适合插件。