文本未显示在 SVG 元素中？
[英]Text not showing up in SVG element?
问题描述
I'm trying to get text to show up in an SVG element I created.
我试图让文本显示在我创建的 SVG 元素中。 I created a textNode and then appended that to a SVG text element, but it doesn't seem to be showing up.我创建了一个 textNode，然后将它附加到一个 SVG 文本元素，但它似乎没有显示出来。 The SVG element is showing up fine but the text isn't appearing. SVG 元素显示正常，但没有显示文本。
I'm doing this in JavaScript.我在 JavaScript 中这样做。
A code sandbox with my code is here and it has my HTML/JavaScript and output.带有我的代码的代码沙箱在这里，它有我的 HTML/JavaScript 和输出。
HTML 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 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.如果我使用 Chrome 控制台检查代码，节点会显示（在 HTML 源代码中），但由于某种原因它没有出现在网页上。
I'd really appreciate any help.我真的很感激任何帮助。
Thank you!谢谢！
2 个解决方案
解决方案1
4 已采纳 2020-01-11 19:50:54
As noted by squeamish ossifrage in the comments:正如squeamish ossifrage 在评论中指出的那样：
"ttp://www.w3.org/2000/svg" is not a valid namespace.
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>
解决方案2
2 2020-01-11 20:33:22
fix the 'h' in the link & remove unnecessary circle+rect修复链接中的“h”并删除不必要的圆+矩形
I add style to the svg then you do not need the extra element circle and rect.我向 svg 添加样式，然后您不需要额外的元素圆和矩形。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.