Question

我正在为构建建筑物创建一个svg工具，我创建了一个房间（使用rect工具）并对其进行分组，现在想要为该房间放置名称，例如：“Office”第一次出现文本放在rect里面，但是下次我必须替换已经退出文本元素的名称。以下是我的代码

    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;

然后你可以使用像

这样的j来操作它

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

Answer 2

我怀疑您在使用Internet Explorer时遇到问题。这是因为 JQuery html（）方法在应用于<text>容器内的<svg>元素时会返回“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} );

如何从jquery中替换svg中的text元素的值

3 个答案: