How to add text on click SVG rectangle using JS

Question

I have this SVG file... I want to add some text when clicking to rectangles and it shouldn't for the black one... Like when i click on any rectangle then it should be >> g rectangle text /g

 <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1200px" height="800px" viewBox="0 0 1200 800" enable-background="new 0 0 1200 800" xml:space="preserve"> <!-- <rect x="50.683" y="111.41" fill="#FFFFFF" stroke="#231F20" stroke-width="3" stroke-miterlimit="10" width="1116.428" height="578.514"/> --> <rect x="76.564" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/> <rect x="173.42" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/> <rect x="270.276" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/> <rect x="367.133" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/> <rect x="463.989" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/> <rect x="667.414" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/> <rect x="764.27" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/> <rect x="861.126" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/> <rect x="957.983" y="132.216" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.681" height="84.682"/> <rect x="1054.839" y="132.216" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/> <rect x="41.042" y="351.442" fill="#FFFFFF" width="23.851" height="112.15"/> <rect x="31.853" y="375.293" fill="#494849" width="1118.006" height="65.463"/> <rect x="76.564" y="252.552" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/> <rect x="173.42" y="252.552" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/> </svg> 

Answer 1

You will need to create the text node. The x and y of the text - in this case - is the center of the rect.

Please read the comments in my code.

 const SVG_NS = 'http://www.w3.org/2000/svg'; //the array of the rects with a white fill let rects = Array.from(svg.querySelectorAll("rect[fill='#FFFFFF']")); //an array of true values as long as the rects array let arr = Array(rects.length).fill(true); //for each rect in the rects array rects.forEach((r,i)=>{ //get the position end the size of the rect (the bounding box) let bb = r.getBBox(); //the center of the rect let x = bb.x + bb.width/2; let y = bb.y + bb.height/2; //on click r.addEventListener("click", ()=>{ //if there isn't already a text element there if(arr[i]){ //add a text element let txt = drawSVGelmt({x:x,y:y},"text", svg) txt.textContent = i; arr[i] = false; } }) }) // a function to create a new svg element function drawSVGelmt(o,tag, parent) { let elmt = document.createElementNS(SVG_NS, tag); for (var name in o) { if (o.hasOwnProperty(name)) { elmt.setAttributeNS(null, name, o[name]); } } parent.appendChild(elmt); return elmt; } 

 text{text-anchor:middle; dominant-baseline:middle} 

 <svg id="svg" width="1200px" height="800px" viewBox="0 0 1200 800" > <rect x="76.564" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/> <rect x="173.42" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/> <rect x="270.276" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/> <rect x="367.133" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/> <rect x="463.989" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/> <rect x="667.414" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/> <rect x="764.27" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/> <rect x="861.126" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/> <rect x="957.983" y="132.216" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.681" height="84.682"/> <rect x="1054.839" y="132.216" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/> <rect x="41.042" y="351.442" fill="#FFFFFF" width="23.851" height="112.15"/> <rect x="31.853" y="375.293" fill="#494849" width="1118.006" height="65.463"/> <rect x="76.564" y="252.552" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/> <rect x="173.42" y="252.552" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/> </svg> 

Observation: since the user can click many time on one rect I needed to add a condition. If there is no text node there create one, else don't.