文本未显示在 SVG 元素中？
[英]Text not showing up in SVG element?
问题描述
我试图让文本显示在我创建的 SVG 元素中。 我创建了一个 textNode，然后将它附加到一个 SVG 文本元素，但它似乎没有显示出来。 SVG 元素显示正常，但没有显示文本。
我在 JavaScript 中这样做。
带有我的代码的代码沙箱在这里，它有我的 HTML/JavaScript 和输出。
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);
输出
如果我使用 Chrome 控制台检查代码，节点会显示（在 HTML 源代码中），但由于某种原因它没有出现在网页上。
我真的很感激任何帮助。
谢谢！
2 个解决方案
解决方案1
4 已采纳 2020-01-11 19:50:54
正如squeamish ossifrage 在评论中指出的那样：
“ttp://www.w3.org/2000/svg”不是有效的命名空间。 你错过了开始时的 h。 另外，尝试在圆形和矩形之后附加文本节点，否则它可能会被它们覆盖。
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
修复链接中的“h”并删除不必要的圆+矩形
我向 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>
文本元素未显示在 SVG 上
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.