Javascript SVG元素中没有显示文本？_Javascript_Html_Css_Svg

Javascript SVG元素中没有显示文本？

javascript html css svg

Javascript SVG元素中没有显示文本？,javascript,html,css,svg,Javascript,Html,Css,Svg,我试图让文本显示在我创建的SVG元素中。我创建了一个textNode，然后将其附加到SVG文本元素中，但它似乎没有显示出来。SVG元素显示良好，但文本未显示我正在用JavaScript做这件事包含我的代码的代码沙盒是，它包含我的HTML/JavaScript和输出 HTML 输出如果我使用Chrome控制台检查代码，节点会显示（在HTML源代码中），但由于某种原因它不会出现在网页上我真的很感激任何帮助谢谢大家! 正如squeamish ossifrage在评论中指出的： "ttp:/

我试图让文本显示在我创建的SVG元素中。我创建了一个textNode，然后将其附加到SVG文本元素中，但它似乎没有显示出来。SVG元素显示良好，但文本未显示

我正在用JavaScript做这件事

包含我的代码的代码沙盒是，它包含我的HTML/JavaScript和输出

HTML

输出

如果我使用Chrome控制台检查代码，节点会显示（在HTML源代码中），但由于某种原因它不会出现在网页上

我真的很感激任何帮助

谢谢大家!

正如squeamish ossifrage在评论中指出的：

"ttp://www.w3.org/2000/svg“”不是有效的命名空间。你一开始就漏掉了h。此外，请尝试在圆和矩形之后附加文本节点，否则它可能会被它们覆盖

const holder=document.createElement（“div”）；
const svg1=document.createElements（“http://www.w3.org/2000/svg“，“svg”）；
svg1.setAttribute（“宽度”、“400”）；
svg1.setAttribute（“高度”、“50”）；
holder.id=“getShitDoneID”；
控制台日志（支架）；
//左圈
const circ1=document.createElements（“http://www.w3.org/2000/svg“，”圆圈“）；
大约1.setAttribute（“fill”和“#F3EAE8”）；
约1.setAttribute（“cx”，25）；
约1.setAttribute（“cy”，25）；
约1.setAttribute（“r”，25）；
//右圆
const circ2=document.createElements（“http://www.w3.org/2000/svg“，”圆圈“）；
大约2.setAttribute（“fill”和“#F3EAE8”）；
约2.setAttribute（“cx”，375）；
约2.setAttribute（“cy”，25）；
约2.setAttribute（“r”，25）；
//中心矩形
const txtBox=document.createElements（“http://www.w3.org/2000/svg“，“rect”）；
setAttribute（“x”，25）；
setAttribute（“y”，0）；
setAttribute（“高度”，50）；
setAttribute（“宽度”，350）；
setAttribute（“fill”和“#F3EAE8”）；
//包含任务的文本
const text=document.createElements（“http://www.w3.org/2000/svg“，”文本“）；
text.setAttribute（“x”，25）；
text.setAttribute（“y”，25）；
setAttribute（“textLength”、“6em”）；
setAttribute（“填充”、“黑色”）；
让innerText=document.createTextNode(
“这是文本！”
);
appendChild（innerText）；
svg1.appendChild（约1）；
svg1.appendChild（txtBox）；
svg1.appendChild（约2）；
svg1.appendChild（文本）；
子对象（svg1）；
console.log（document.querySelector（“body”）；
文件。查询选择器（“正文”）。附件子项（持有人）

文件
修复链接中的“h”并删除不必要的圆圈+矩形
我将样式添加到svg中，这样就不需要额外的元素circle和rect

const holder=document.createElement（“div”）；
const svg1=document.createElements（“http://www.w3.org/2000/svg“，“svg”）；
svg1.setAttribute（“宽度”、“400”）；
svg1.setAttribute（“高度”、“50”）；
svg1.setAttribute（“样式”，“背景色：#f3eae8；边框半径：50px；”）；
holder.id=“getShitDoneID”；
控制台日志（支架）；
//包含任务的文本
const text=document.createElements（“http://www.w3.org/2000/svg“，”文本“）；
text.setAttribute（“x”，25）；
text.setAttribute（“y”，25）；
setAttribute（“textLength”、“6em”）；
setAttribute（“填充”、“黑色”）；
让innerText=document.createTextNode(
“这是文本！”
);
appendChild（innerText）；
svg1.appendChild（文本）；
子对象（svg1）；
console.log（document.querySelector（“body”）；
文件。查询选择器（“正文”）。附件子项（持有人）

文件
请在此处发布相关代码。外部链接可能会中断，并且不是每个人都能跟随它们。也就是说，您要添加什么类型的textNode，一个文档。createTextNode（）
类还是一个
节点？@AndreNuechter很抱歉，我已经添加了代码。textNode是一种使用CreateElements（“文本”）
的
类型。内部文本正在使用createTextNode（）
”ttp://www.w3.org/2000/svg“
不是有效的命名空间。您在开始时遗漏了h
。另外，试着在圆和矩形之后添加文本节点，否则它可能会被它们覆盖。明白了。成功了。谢谢！很抱歉输入错误。或者您可以使用text.textContent=“这就是文本！”而不是创建文本节点
<!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>

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);