How to dynamically create SVG text elements using JS

Question

So, I have an SVG element that is a text. I would like to dynamically create more SVG text elements of exactly the same kind using javascript. (preferably using a for loop of some kind). One option would just to hardcode in the values, but I rather not do that. Here is my code:

var overlapThreshold = "50%";
var name_count = 0;
Draggable.create(".seat_name", {
  bounds: "svg",
  onDrag: function(e) {
    if (this.hitTest("#test1", overlapThreshold)) {
      document.getElementById("test1").setAttribute('fill', 'url(#gradRed)');
    } else {
      document.getElementById("test1").setAttribute('fill', 'url(#gradGreen)');
    }
  }
});

function change_name(event) {
  var name = prompt("Enter a New Name:");
  if (name != null && name != "") {
    event.target.textContent = name;
  }
}

  <button id="test_button" onclick="create_name_tags()">Test</button> <svg height="1000" width="1000">
  <defs>
    <lineargradient id="gradGreen" x1="0%" x2="100%" y1="0%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(152, 251, 152);stop-opacity:1"></stop>
      <stop offset="100%" style="stop-color:rgb(0, 128, 0);stop-opacity:1"></stop>
    </lineargradient>
    <lineargradient id="gradRed" x1="0%" x2="100%" y1="0%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255, 0, 0);stop-opacity:1"></stop>
      <stop offset="100%" style="stop-color:rgb(178, 34, 34);stop-opacity:1"></stop>
    </lineargradient>
  </defs>
  <g class="circle_seat" id="circle_seats">
    <circle cx="70" cy="200" fill="url(#gradGreen)" id="test1" id="seat1" r="40" stroke="black" stroke-width="1"></circle>
  </g>
  <g class="seat_name" id="seat_name1">
    <text fill="#black" font-family="Verdana" font-size="20" id="seat1_details" ondblclick="change_name(event)" x="250" y="210">
      BLANK
    </text>
  </g>
  </svg>

Jamima

When using the 'Run code snippet' it returns an error, 'Draggable' is undefined. – Linwoodlinz

TL;dr: var el = document.createElementNS("http://www.w3.org/2000/svg", "text"); ....replace text with the element type (eg, path, etc). To set attributes use setAttributeNS like el.setAttributeNS(null, 'x', x); More on this answer. – Tippets

Answer 1

This is how I create text dynamically. You will need to define an object with the text properties and the text content.

const SVG_NS = "http://www.w3.org/2000/svg";
// an object to define the properties and text content of the text element 
let o = {
  props: {
    x: 50,
    y: 15,
    "dominant-baseline": "middle",
    "text-anchor": "middle"
  },
  txtConent: "test text"
};

// a function to create a text element 
function drawText(o, parent) {
  // create a new text element
  let text = document.createElementNS(SVG_NS, "text");
  //set the attributes for the text
  for (var name in o.props) {
    if (o.props.hasOwnProperty(name)) {
      text.setAttributeNS(null, name, o.props[name]);
    }
  }
  // set the text content
  text.textContent = o.txtConent;
  // append the text to an svg element of your choice
  parent.appendChild(text);
  return text;
}

drawText(o, theSvg);

svg{border:1px solid}

<svg id="theSvg" viewBox="0 0 100 30"></svg>

If you also need a way to change the text content dynamically this is how I would do it:

const SVG_NS = "http://www.w3.org/2000/svg";
// an object to define the initial properties and text content of the text element 
let o = {
  props: {
    x: 50,
    y: 15,
    "dominant-baseline": "middle",
    "text-anchor": "middle"
  },
  txtConent: "your name"
};

// a function to create a text element 
function drawText(o, parent) {
  var text = document.createElementNS(SVG_NS, "text");
  for (var name in o.props) {
    if (o.props.hasOwnProperty(name)) {
      text.setAttributeNS(null, name, o.props[name]);
    }
  }
  text.textContent = o.txtConent;
  parent.appendChild(text);
  return text;
}

// a function to update the text
function updateText(text,txtConent){
  text.textContent = txtConent;
}


//you save the text in a variable
let txt = drawText(o, theSvg);
// you update the text content when the user is changing the value of the input
theName.addEventListener("input", ()=>{updateText(txt,theName.value)})

svg{border:1px solid}

<p>The name: <input type="text" id="theName" /></p>
<svg id="theSvg" viewBox="0 0 100 30"></svg>

I hope it helps.

Hydrophone

Answer 2

Simplified example _{^{(optionally using a Google Font)}}

addText("Your Text Here", 20, 50);

function addText(txt, x, y) {
  var el = document.createElementNS("http://www.w3.org/2000/svg", "text");
  el.textContent = txt;
  el.setAttributeNS(null, 'x', x);
  el.setAttributeNS(null, 'y', y);
  document.getElementById('svg').appendChild(el);
}

#svg{ width:100vw; height:100vw; font-family:'Crafty Girls'; font-size:50px;
      stroke:red; fill:yellow; }

<link href="https://fonts.googleapis.com/css2?family=Crafty+Girls&display=swap" rel="stylesheet">

<svg id='svg'></svg>

---

Documentation:

• Document.createElementNS()
• Node.textContent
• Element.setAttributeNS()

Tippets

Answer 3

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", "url(#gradGreen)");
shape.setAttribute("stroke","black");
shape.setAttribute("class","circle_seat");
document.getElementById("circle_seats").appendChild(shape);

Jamima

This does not appear to create text elements, which is what the question asks for. – Aneto