jQuery 在文本路径 svg 元素方面存在问题

jQuery having issues with textpath svg elements

本文关键字：方面 存在 问题 元素 svg 文本 路径 jQuery      更新时间：2023-09-26

我在我的项目中使用 SVG，并希望在单击文本路径元素时在 jQuery 上切换 Class。

所以我在想：

$("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 但在使用它之前，我想确定我的案例是否真的需要它。

jQuery的.class不适用于SVG元素，你必须使用attr：

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

查看 jsFiddle 演示。

相关文章：