文本未顯示在 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.