CODEWITHSUNDEEP
javascriptjquerysvgsvg-edit
Roobena
Roobena

Reputation: 259

How to replace the value of the text element in svg from jquery

I am creating an svg tool for the constructing a building , i had created a room ( with the rect tool ) and grouped it and now want to place the name for that room eg : "Office" for the first time the text placed inside the rect , but for the next time i have to replace the name already exit inside the text element . Below is my code

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

Here i had find whether the text is already present in the group and replace it as empty and again append the text, But it do-sent work. Can any one guide

Upvotes: 0

Views: 9457

Answers (3)

Adam D
Adam D

Reputation: 51

I am suspecting that you are having a problem with Internet Explorer. This is because the JQuery html() method returns "undefined" when applied to <text> elements inside of an <svg> container. JQuery html() will work in Chrome but not in Internet Explorer. Use JQuery text() method instead, it does not return the whole inner HTML of the element, just the text but that should not be an issue for text in an SVG.

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

Chrome:

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

IE11:

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

This works on both Chrome and IE:

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

Upvotes: 0

taggon
taggon

Reputation: 1936

You already use jQuery, take more advantage of it.

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

Upvotes: -1

T J
T J

Reputation: 43156

Try setting an id for the textNode

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;

Then you can manipulate it using js like

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

Upvotes: 3

Related Questions