用鼠标点击更改SVG字体大小

Question

我试图使用以下方式改变SVG文本的大小：

$("#text"+x).click(function(){
    //$(this).style("font-size", "4");
    document.getElementById("text"+x).setAttributeNS(null, "font-size", "4px");
    //this.attr("font-size", "4px");
    alert('it is I'); 
});

你可以在那里看到我大多数失败的尝试。我成功地弹出了警报，但是没有任何反应和错误信息。我已经在网上和Stack Overflow上搜寻了很久...

我正在使用JS + Jquery！
欢迎任何提示！
干杯！

- Joaquim Santos

---

你能否提供一个可运行的代码片段或者JSFiddle链接？ - ZeroBased_IX

Answer 1

使用下面的代码。检查演示。您需要将font-size设置为属性。

 $(document).ready(function(){ 
  $("#text"+x).on('click',function(){
    $(this).attr("font-size", "50");
    alert('it is I'); 
  });
 });

或者，如果您正在动态添加 SVG 元素，请使用以下代码

 $(document).ready(function(){ 
    $(document).on('click',"#text"+x,function(){
      $(this).attr("font-size", "50");
      alert('it is I'); 
    });
 });

- Nishit Maheta

---

再次问候！ 是的，你的例子可以运行，但我无法在我的端上使其工作。我对此一无所知。我检查了文本的属性，并按照你的方式做了所有事情，我想...我会尽快放一个可运行的片段；感谢迄今为止的帮助！ - Joaquim Santos

你能分享fiddle的完整代码吗？你如何获取'x'？ - Nishit Maheta

x只是我正在运行的for循环中的一个变量...因为我需要更改单词的部分。 - Joaquim Santos

@JoaquimSantos 你能给我发那段代码吗？意思是SVG元素+循环？ - Nishit Maheta

解决了！我的错！新手错误！我将单词片段设置为0不透明度，以便用户看不到它，并忘记在单击时应用它 :/ 感谢你的帮助！ - Joaquim Santos