我正在尝试用Js编写代码，以从JSON格式构建HTML页面。除了渲染SVG元素外，其他都可以正常工作。问题是这样的：SVG元素在html代码中，但浏览器不显示它！如果您在检查器中的svg元素后手动添加一些标签，例如<br>，那么svg将立即出现在屏幕上。
已尝试使用createElementNS。在这种情况下，它只在JSON中除了svg元素之外没有其他元素时才有效！只要你添加例如img，然后svg停止显示在屏幕上！我的头已经破了，我不知道该怎么办！
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg height="70" width="150">
<polygon points="2,10 50,7 139,32 66,51"></polygon>
</svg>
<div class="container">
</div>
</body>
<script>
function renderHtmlElements(data) {
const element = document.createElement(data.tag);
if (data.attributes) {
Object.keys(data.attributes).forEach(key => {
element.setAttribute(key, data.attributes[key]);
});
}
if (data.children) {
data.children.forEach(childData => {
const childElement = renderHtmlElements(childData);
element.appendChild(childElement);
});
}
if (data.textNode) {
element.appendChild(document.createTextNode(data.textNode));
}
return element;
}
// parent to insert the HTML
const container = document.querySelector(".container");
// data for the HTML in a JSON object
const htmlData = {
"tag": "div",
"attributes": {
"id": "L1",
"class": "Labels"
},
"children": [
{
"tag": "img",
"attributes": {
"class": "",
"src": "",
"width": "160",
"height": "100"
},
"children": []
},
{
"tag": "div",
"attributes": {},
"children": [
{
"tag": "svg",
"attributes": {
"width": "150",
"height": "70"
},
"children": [
{
"tag": "polygon",
"attributes": {
"points": "2,10 50,7 139,32 66,51"
},
"children": []
}
]
}
]
}
]
}
// Create the HTML element from the JSON data and append it to the container
const htmlElement = renderHtmlElements(htmlData);
container.appendChild(htmlElement);
</script>
</html>下一个代码不工作太..：
function renderHtmlElements(data) {
let element;
if (data.tag === "svg") {
element = document.createElementNS("http://www.w3.org/2000/svg", data.tag);
} else {
element = document.createElement(data.tag);
}
if (data.attributes) {
Object.keys(data.attributes).forEach(key => {
if (data.tag === "svg") {
element.setAttributeNS("http://www.w3.org/2000/svg", key, data.attributes[key]);
} else {
element.setAttribute(key, data.attributes[key]);
}
});
}
if (data.children) {
data.children.forEach(childData => {
const childElement = renderHtmlElements(childData);
element.appendChild(childElement);
});
}
if (data.textNode) {
element.appendChild(document.createTextNode(data.textNode));
}
return element;}
1条答案
按热度按时间qhhrdooz1#
解决：需要使用setAttribute（）而不是setAttributeNS（）