stackoom
  简体   繁体   中英

Text not showing up in SVG element?

 原文  2020-01-11 19:11:55  6   2    javascript/ html/ css/ svg

Question

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输出

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!

2 answers

solution1
 4 ACCPTED  2020-01-11 19:50:54

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>

solution2
 2  2020-01-11 20:33:22

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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Text element not showing on SVG SVG text elements not showing up on chart SVG title tooltip not showing on text element SVG text element not showing in android browser JavaScript/HTML - SVG Arrowhead not showing up on line element SVG foreignObject text not showing SVG <textPath> not showing up (with ReactJS) SVG text element speed Caption an SVG with <text> element? Text Not Showing Over SVG Rects
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM