如何從jQuery替換SVG中的文本元素的值

Question

我正在創建用於構建建築物的svg工具，我已經創建了一個房間（使用rect工具）並將其分組，現在要放置該房間的名稱，例如：“ Office”第一次將文本放置在rect，但是下次我必須替換已經在text元素內退出的名稱。 下面是我的代碼

    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);            

在這里，我發現該文本是否已經存在於該組中，並將其替換為空，然后再次追加該文本，但是它確實可以發送。 可以指導任何一位

Answer 1

嘗試為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";

Answer 2

我懷疑您的Internet Explorer存在問題。 這是因為當將JQuery html（）方法應用於<svg>容器內的<text>元素時，返回“ undefined”。 jQuery html（）將在Chrome中運行，但不能在Internet Explorer中運行。 請改用JQuery text（）方法，它不會返回元素的整個內部HTML，而僅返回文本，但這不應該是SVG中文本的問題。

<svg width="200px" height="200px">
<text x="50%" y="50%" fill="#AAA">Some text</text>
</svg>

鉻：

> $("svg text").html()
"Some text" 

IE11：

$("svg text").html()
undefined

這適用於Chrome和IE：

> $("svg text").text()
"Some text" 

Answer 3

您已經使用了jQuery，請充分利用它。

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);

// find existing text element
var $parent = $( "#"+gethide_curtselid );
var $text = $parent.find('text');

// if there is no <text>, create a <text> element with fixed value attributes
// and append it to $parent.
if ($text.length == 0) {
   $text = $('<text fill="#343938" text-anchor="middle" />').appendTo($parent);
}

// set attributes and text content.
$text.text( room_name ).attr( {x: x, y: y} );