CODEWITHSUNDEEP
javascripthtmlcsssvg
Somya Agrawal
Somya Agrawal

Reputation: 375

Text not showing up in SVG element?

I'm trying to get text to show up in an SVG element I created. I created a textNode and then appended that to a SVG text element, but it doesn't seem to be showing up. The SVG element is showing up fine but the text isn't appearing.

I'm doing this in JavaScript.

A code sandbox with my code is here and it has my HTML/JavaScript and output.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Document</title>
  </head>
  <body>
    <div id="main"></div>
    <script src="script.js"></script>
  </body>
</html>

JavaScript

const holder = document.createElement("div");
const svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg1.setAttribute("width", "400");
svg1.setAttribute("height", "50");
holder.id = "getShitDoneID";
console.log(holder);

// Left Circle
const circ1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circ1.setAttribute("fill", "#F3EAE8");
circ1.setAttribute("cx", 25);
circ1.setAttribute("cy", 25);
circ1.setAttribute("r", 25);

// Right Circle
const circ2 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circ2.setAttribute("fill", "#F3EAE8");
circ2.setAttribute("cx", 375);
circ2.setAttribute("cy", 25);
circ2.setAttribute("r", 25);

// Center Rectangle
const txtBox = document.createElementNS("http://www.w3.org/2000/svg", "rect");
txtBox.setAttribute("x", 25);
txtBox.setAttribute("y", 0);
txtBox.setAttribute("height", 50);
txtBox.setAttribute("width", 350);
txtBox.setAttribute("fill", "#F3EAE8");

// Text that contains Task
const text = document.createElementNS("ttp://www.w3.org/2000/svg", "text");
text.setAttribute("x", 25);
text.setAttribute("y", 25);
text.setAttribute("textLength", "6em");
text.setAttribute("fill", "black");

let innerText = document.createTextNode(
  "This is the text!"
);

text.appendChild(innerText);
svg1.appendChild(text);
svg1.appendChild(circ1);
svg1.appendChild(txtBox);
svg1.appendChild(circ2);
holder.appendChild(svg1);
console.log(document.querySelector("body"));
document.querySelector("body").appendChild(holder);

Output output

If I check the code using Chrome Console, the Node is showing up (in the HTML source code), but it's not appearing on the webpage for some reason.

I'd really appreciate any help.

Thank you!

Upvotes: 2

Views: 3158

Answers (2)

Omer
Omer

Reputation: 3466

fix the 'h' in the link & remove unnecessary circle+rect

I add style to the svg then you do not need the extra element circle and rect.

const holder = document.createElement("div");
const svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg1.setAttribute("width", "400");
svg1.setAttribute("height", "50");
svg1.setAttribute("style", "background-color: #f3eae8; border-radius: 50px;");
holder.id = "getShitDoneID";
console.log(holder);

// Text that contains Task
const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
text.setAttribute("x", 25);
text.setAttribute("y", 25);
text.setAttribute("textLength", "6em");
text.setAttribute("fill", "black");

let innerText = document.createTextNode(
  "This is the text!"
);

text.appendChild(innerText);
svg1.appendChild(text);
holder.appendChild(svg1);
console.log(document.querySelector("body"));
document.querySelector("body").appendChild(holder);
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />

  <title>Document</title>
</head>

<body>
  <div id="main"></div>
  <script src="script.js"></script>
</body>

</html>

Upvotes: 2

coreyward
coreyward

Reputation: 80041

As noted by squeamish ossifrage in the comments:

"ttp://www.w3.org/2000/svg" is not a valid namespace. You missed out the h at the beginning. Also, try appending the text node after the circles and rectangle, otherwise it will probably be covered by them.

const holder = document.createElement("div");
const svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg1.setAttribute("width", "400");
svg1.setAttribute("height", "50");
holder.id = "getShitDoneID";
console.log(holder);

// Left Circle
const circ1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circ1.setAttribute("fill", "#F3EAE8");
circ1.setAttribute("cx", 25);
circ1.setAttribute("cy", 25);
circ1.setAttribute("r", 25);

// Right Circle
const circ2 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circ2.setAttribute("fill", "#F3EAE8");
circ2.setAttribute("cx", 375);
circ2.setAttribute("cy", 25);
circ2.setAttribute("r", 25);

// Center Rectangle
const txtBox = document.createElementNS("http://www.w3.org/2000/svg", "rect");
txtBox.setAttribute("x", 25);
txtBox.setAttribute("y", 0);
txtBox.setAttribute("height", 50);
txtBox.setAttribute("width", 350);
txtBox.setAttribute("fill", "#F3EAE8");

// Text that contains Task
const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
text.setAttribute("x", 25);
text.setAttribute("y", 25);
text.setAttribute("textLength", "6em");
text.setAttribute("fill", "black");

let innerText = document.createTextNode(
  "This is the text!"
);

text.appendChild(innerText);
svg1.appendChild(circ1);
svg1.appendChild(txtBox);
svg1.appendChild(circ2);
svg1.appendChild(text);
holder.appendChild(svg1);
console.log(document.querySelector("body"));
document.querySelector("body").appendChild(holder);
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />

  <title>Document</title>
</head>

<body>
  <div id="main"></div>
  <script src="script.js"></script>
</body>

</html>

Upvotes: 4

Related Questions