javascript - jQuery 的 textpath svg 元素有问题

Question

我在我的项目中使用SVG，并且希望在textpath元素上使用toggleClass与jQuery点击。

所以我在想:

$("text#names > textpath").click(function() {
    $(this).toggleClass("newClass");
});

在 HTML 源代码上:

<text id="names" class="clickthrough">
    <textpath class="zoom1" href="#text1" font-size="12.1"></textpath>
    <textpath ... </textpath>
</text>

但什么也没发生。如果我这样做 $("text#names") 我会得到类点击率。所以它是有效的，只是 jQuery 可能不知道文本路径。所以我找到了http://keith-wood.name/svgref.html但在使用它之前，我想确定我的情况是否真的需要它。

Answer 1

jQuery 的 .class 不适用于 SVG 元素，您必须使用 attr 来代替:

$("text#names > textpath").click(function() {
  $(this).attr("class", function(_, val){
    return (val.indexOf("newClass")+1) ? val.replace(" newClass","") : val+" newClass";
  });
});

查看the jsFiddle demo .