0

我正在为构建建筑物创建一个 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);

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

4

3 回答 3

3

尝试为 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";
于 2014-07-16T08:08:36.537 回答
0

我怀疑您在使用 Internet Explorer 时遇到问题。这是因为JQuery html()方法在应用于容器 <text>内的元素时返回“未定义”。JQuery html()可以在 Chrome 中工作，但不能在 Internet Explorer 中工作。改用JQuery text()方法，它不会返回元素的整个内部 HTML，只返回文本，但这对于 SVG 中的文本不应该是问题。<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"
于 2016-10-27T19:29:57.260 回答
-1

您已经在使用 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} );
于 2014-07-16T08:21:30.067 回答