本文旨在解决在使用 JavaScript 从 JSON 数据动态生成包含 SVG 元素的 HTML 页面时，SVG 元素无法在浏览器中正常显示的问题。通过分析问题原因和提供正确的代码示例，帮助开发者避免此类问题，并确保 SVG 元素能够正确渲染。
问题分析
当使用 createElementNS 创建 SVG 元素时，需要特别注意属性的设置方式。错误地使用 setAttributeNS 设置属性可能导致 SVG 元素无法正确渲染。虽然 setAttributeNS 用于设置 XML 命名空间中的属性，但对于 SVG 元素的大部分属性，直接使用 setAttribute 即可。
解决方案
正确的解决方案是始终使用 setAttribute() 方法来设置 SVG 元素的属性，而不是 setAttributeNS()。以下是修改后的 renderHtmlElements 函数：
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 => {
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;
}在上述代码中，移除了对 SVG 元素使用 setAttributeNS 的逻辑，统一使用 setAttribute 来设置所有元素的属性，包括 SVG 元素的属性。
立即学习“Java免费学习笔记（深入）”；
完整示例代码
以下是完整的示例代码，展示了如何使用修改后的 renderHtmlElements 函数正确渲染包含 SVG 元素的 HTML 页面：
<!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) {
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 => {
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>总结
在动态生成包含 SVG 元素的 HTML 时，务必使用 setAttribute() 方法来设置 SVG 元素的属性。避免使用 setAttributeNS()，除非你确实需要设置 XML 命名空间中的属性。通过遵循这个简单的规则，可以避免 SVG 元素无法正确渲染的问题，并确保你的页面能够正确显示 SVG 图形。
