通过鼠标单击更改 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'); 
});

您可以在那里看到我的大部分失败尝试。我收到警报弹出，但没有任何反应，也没有错误消息。 我搜索了网络和堆栈溢出无济于事...... 我正在使用 JS + Jquery！

欢迎任何提示！
干杯！

Answer 1

使用下面的代码。检查DEMO。您需要将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'); 
    });
 });