How can I add an svg text element after a specific svg element? (Or is there an easier way to do this?)

Question

Basically, I am hardcoding the circles with their labels attached to them. But I want to be able to do this using javascript and a for loop. How would I go about doing this? To give more content, I want basically make seats that have their id number (text) on top of them. Also, is there a way I could automatically center the text to the center of each circle, without having to manually code that part in too? Thanks for your time.

var overlapThreshold = "50%";
var name_count = 0;
var x_axis_seats = 22;









function change_name(event) {
 var name = prompt("Enter a New Name (Max 20 characters):");
 while(name.length > 20) {
    name = prompt("Enter a New Name (Previous Over 20 Characters)");
  }
  if (name != null && name != "") {
event.target.textContent = name;
 }
}

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
 <button id="test_button" onclick="create_seats()">Test</button> 
  
  <svg height="1500" width="1500">
 <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="gradYellow" x1="0%" x2="100%" y1="0%" y2="0%">
   <stop offset="0%" style="stop-color:rgb(255, 140, 0);stop-opacity:1"></stop>
   <stop offset="100%" style="stop-color:rgb(218, 165, 32);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="21" cy="580" fill="url(#gradGreen)" id="seat1" r="20" stroke="black" stroke-width="1" />
        <text fill="#black" font-size="30" font-family="Verdana"x="11" y="590">1</text>
      
        <circle cx="70" cy="580" fill="url(#gradGreen)" id="seat2" r="20" stroke="black" stroke-width="1" />
        <text fill="#black" font-size="30" font-family="Verdana" x=60 y="590">2</text>
    
        <circle cx="119" cy="580" fill="url(#gradGreen)" id="seat3" r="20" stroke="black" stroke-width="1" />
        <text fill="#black" font-size="30" font-family="Verdana" x=109 y="590">3</text>
    
        <circle cx="168" cy="580" fill="url(#gradGreen)" id="seat4" r="20" stroke="black" stroke-width="1" />
        <text fill="#black" font-size="30" font-family="Verdana" x=158 y="590">4</text>
    
        <circle cx="217" cy="580" fill="url(#gradGreen)" id="seat5" r="20" stroke="black" stroke-width="1" />
        <text fill="#black" font-size="30" font-family="Verdana" x=207 y="590">5</text>
    
        <circle cx="266" cy="580" fill="url(#gradGreen)" id="seat6" r="20" stroke="black" stroke-width="1" />
        <text fill="#black" font-size="30" font-family="Verdana" x=256 y="590">6</text> 
    
        <circle cx="315" cy="580" fill="url(#gradGreen)" id="seat7" r="20" stroke="black" stroke-width="1" />
        <text fill="#black" font-size="30" font-family="Verdana" x=305 y="590">7</text>   
    
        <circle cx="364" cy="580" fill="url(#gradGreen)" id="seat8" r="20" stroke="black" stroke-width="1" />
        <text fill="#black" font-size="30" font-family="Verdana" x=354 y="590">8</text> 
        
        <circle cx="413" cy="580" fill="url(#gradGreen)" id="seat9" r="20" stroke="black" stroke-width="1" />
        <text fill="#black" font-size="30" font-family="Verdana" x=403 y="590">9</text> 
            
        <circle cx="462" cy="580" fill="url(#gradGreen)" id="seat10" r="20" stroke="black" stroke-width="1" />
        <text fill="#black" font-size="28" font-family="Verdana" x=444 y="590">10</text> 
    
        <circle cx="511" cy="580" fill="url(#gradGreen)" id="seat11" r="20" stroke="black" stroke-width="1" />
        <text fill="#black" font-size="28" font-family="Verdana" x=493 y="590">11</text>
        
        <circle cx="609" cy="580" fill="url(#gradGreen)" id="seat12" r="20" stroke="black" stroke-width="1" />
        <text fill="#black" font-size="28" font-family="Verdana" x="591" y="590">12</text>   
         
        <circle cx="658" cy="580" fill="url(#gradGreen)" id="seat13" r="20" stroke="black" stroke-width="1" />
        <text fill="#black" font-size="28" font-family="Verdana" x="640" y="590">13</text> 
             
        <circle cx="707" cy="580" fill="url(#gradGreen)" id="seat14" r="20" stroke="black" stroke-width="1" />
        <text fill="#black" font-size="28" font-family="Verdana" x="689" y="590">14</text> 
        
        <circle cx="756" cy="580" fill="url(#gradGreen)" id="seat15" r="20" stroke="black" stroke-width="1" />
        <text fill="#black" font-size="28" font-family="Verdana" x="738" y="590">15</text> 
            
        <circle cx="805" cy="580" fill="url(#gradGreen)" id="seat16" r="20" stroke="black" stroke-width="1" />
        <text fill="#black" font-size="28" font-family="Verdana" x="787" y="590">16</text> 
    
        <circle cx="854" cy="580" fill="url(#gradGreen)" id="seat17" r="20" stroke="black" stroke-width="1" />
        <text fill="#black" font-size="28" font-family="Verdana" x="836" y="590">17</text>     
        
        <circle cx="903" cy="580" fill="url(#gradGreen)" id="seat18" r="20" stroke="black" stroke-width="1" />
        <text fill="#black" font-size="28" font-family="Verdana" x="885" y="590">18</text> 
            
        <circle cx="952" cy="580" fill="url(#gradGreen)" id="seat19" r="20" stroke="black" stroke-width="1" />
        <text fill="#black" font-size="28" font-family="Verdana" x="934" y="590">19</text> 
                
        <circle cx="1001" cy="580" fill="url(#gradGreen)" id="seat20" r="20" stroke="black" stroke-width="1" />
        <text fill="#black" font-size="28" font-family="Verdana" x="983" y="590">20</text> 
    
    
    
    
    
    
  </g>
 
  
  
  
  <g class="seat_name" id="seat_name1">
  <text fill="#black" font-family="Verdana" font-size="15" id="seat_name1" ondblclick="change_name(event)" x="250" y="210">
   BLANK
  </text>
 </g>

  
  </svg>
</body>
</html>

Here is my code:

score 1 · Accepted Answer · answered Jan 08 '19 at 20:13

The easiest way to do it is using Javascript to create all those circles and the tex. Also I've moves some things into the css: fill, stroke, font-family, font-size . . .etc

const SVG_NS = 'http://www.w3.org/2000/svg';

let Y = 80;


// create the circles and the text.
for(let i = 0; i< 20; i++){
  let x = 21 + i*49;
  drawCircle({cx:x, cy:Y,r:20},circle_seats);
  drawText({props:{x:x, y:Y},txtContent:i}, circle_seats);
}


function drawCircle(o, parent) {

  var circle = document.createElementNS(SVG_NS, 'circle');
  for (var name in o) {
    if (o.hasOwnProperty(name)) {
      circle.setAttributeNS(null, name, o[name]);
    }
  }
  parent.appendChild(circle);
  return circle;
}

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.txtContent;
  parent.appendChild(text);
  return text;
}

text {
  fill: black;
  font-family: Verdana;
  font-size: 28px;
  stroke: black;
  dominant-baseline:middle;
  text-anchor:middle;
}

circle {
  fill: url(#gradGreen);
  stroke: black;
}

<svg id="svg" height="1500" width="1500">
 <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="gradYellow" x1="0%" x2="100%" y1="0%" y2="0%">
   <stop offset="0%" style="stop-color:rgb(255, 140, 0);stop-opacity:1"></stop>
   <stop offset="100%" style="stop-color:rgb(218, 165, 32);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">
    
  </g>
 
  
  
  
  <g class="seat_name" id="seat_name1">
  <text fill="#black" font-family="Verdana" font-size="15" id="seat_name1" ondblclick="change_name(event)" x="250" y="210">
   BLANK
  </text>
 </g>

  
  </svg>

wow thank you! Can you explain the for loops and what's exactly going on? — First Last, Jan 08 '19 at 20:30
I've taken the data from your code. I want to create 20 pairs circle text: ` for(let i = 0; i< 20; i++){`, In your code circles are at 49 user units apart in x and the first circle is at 21 user units.` let x = 21 + i*49`. Knowing the value for the x and y I draw first a circle and then I draw the text. The text content for the text is the index `i`, Also the text is centered around the center of the circle. — enxaneta, Jan 08 '19 at 21:46
Oh ok, so what about the hasownproperty? is that neccessary or not? and the o.props[name] part — First Last, Jan 08 '19 at 23:42
In this case you may like to read this answer: [How to iterate over a JavaScript object?](https://stackoverflow.com/questions/14379274/how-to-iterate-over-a-javascript-object#14379304) — enxaneta, Jan 09 '19 at 09:09

How can I add an svg text element after a specific svg element? (Or is there an easier way to do this?)

1 Answers1