javascript - 如何从jquery替换svg中文本元素的值

标签 javascript jquery svg svg-edit

我正在创建一个用于构建建筑物的 svg 工具,我创建了一个房间(使用 rect 工具)并将其分组,现在想要为该房间命名,例如:“Office”第一次出现文本放置在矩形内,但下次我必须替换文本元素内已经存在的名称。 下面是我的代码

    var svgns = 'http://www.w3.org/2000/svg';     
    var ex_x=70;
    var ex_y=30;

    var hidden = parseInt($("#svg_group_osiz_1").val());    
    var gethide_curtselid=$("#hide_curtselid").val();      
    var gethide_curtselid12=$("#hide_curtdrawx_id").val();     
    var gethide_curtselid13=$("#hide_curtdrawy_id").val();       

    var x=parseInt(gethide_curtselid12) + parseInt(ex_x);  
    var y=parseInt(gethide_curtselid13) + parseInt(ex_y);            

    var text = document.createElementNS(svgns, 'text');  

    text.setAttributeNS(null, 'x', x); 
    text.setAttributeNS(null, 'y', y);           
    text.setAttributeNS(null, 'fill', '#343938');    
    text.setAttributeNS(null, 'text-anchor', 'middle');
    text.textContent =room_name;    

    var html =$( "#"+gethide_curtselid ).html();        

    if(html.contains("</text>"))
    {       
        var start_string=html.indexOf("<text");
        var end_string  =   html.indexOf("</text>");        
        end_string      =   end_string+7;   
        remove_string   =   html.substring(start_string,end_string);        
        var content_replaced = html.replace(remove_string,"");      

        $( "#"+gethide_curtselid ).html(content_replaced);
        var replaced_html =$( "#"+gethide_curtselid ).html();   

    }   

    $( "#"+gethide_curtselid ).append(text);            

在这里,我发现文本是否已经存在于组中,并将其替换为空,然后再次附加文本,但它确实发送了工作。谁能指导一下

最佳答案

尝试为textNode设置一个id

var text = document.createElementNS(svgns, 'text');  
text.setAttributeNS(null, 'x', x); 
text.setAttributeNS(null, 'y', y);           
text.setAttributeNS(null, 'fill', '#343938');    
text.setAttributeNS(null, 'text-anchor', 'middle');
text.setAttributeNS(null, 'id', 'roomName');
text.textContent =room_name; 

然后你可以使用js来操作它

document.getElementById('roomName').textContent = "new text";

关于javascript - 如何从jquery替换svg中文本元素的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24775232/

相关文章:

javascript - SVG 组拖动

ios - React Native SVG - (iOS) 不变违规 : Native component for "RNSVGSvgView" does not exist

javascript - c3.js如何将y标签放置在水平条形图中的条形内?

javascript - requestAnimationFrame 不等待下一帧

javascript - 使用 css 调整 div 中对 Angular 线的大小

jquery - Bootstrap : Control multiple tab panels with single tab nav

javascript - 使用 javascript 将当前 URL 复制到新的警报窗口中

javascript - 如何在 ASP.NET MVC 中从 JSON 呈现 FullCalendar 中的事件?

javascript - 我在处理带有逗号小数分隔符的数字时遇到问题

javascript - 如何从常规网站调用 Chrome 扩展中定义的函数?