Home/ Questions/Q 8764395
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T16:01:23+00:00

I have a SVG which contains text within a rectangle . I would like

  • 0

I have a SVG which contains text within a rectangle. I would like to change the text at some user interaction.

Most of the code I have come across does something like this: (sample code is for adding a circle)

var shape = document.createElementNS("http://www.w3.org/2000/svg", "circle");
shape.setAttribute("cx", 25);
shape.setAttribute("cy", 25);
shape.setAttribute("r",  20);
shape.setAttribute("fill", "green");

While I used:

function writeSVG() {
        clearSVG();
        var name = document.getElementById('txtName').value;
        var txtNode = '<text id="newTxt" x="300" y="300">' + name + '</text>';
        $('#svgElem').append(txtNode);
        $('#popUp').hide();
    }

//Removes all text from SVG rectangle
    function clearSVG() {
        $('#controls text').remove();
    }

and my SVG is written directly into the HTML

 <div id="controls">
        <svg id="svgElem" height="600" xmlns="http://www.w3.org/2000/svg" version="1.1">    Sorry, your browser does not support SVG.
        <rect id="rectSVG" width="500" height="500" style="fill:#FFFFFF;stroke:black;stroke-width:2;" onclick="launchPopUp();" />
       <text id="defaultTxt" x="200" y="200">Click in here!</text>
       </svg>
    </div>

NOTE: I am using Safari 5.1

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The way you are creating the <text> element puts it in to the wrong namespace. Creating a string and then parsing it via .append() will put the element into the HTML namespace, not the SVG one.

    You must wrap your string in <svg> and </svg> before parsing, and then append the children of the resultant root node to your <svg> element in the DOM.

    • 0