本文旨在解决在使用 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 页面：
Document 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);
总结
在动态生成包含 SVG 元素的 HTML 时，务必使用 setAttribute() 方法来设置 SVG 元素的属性。避免使用 setAttributeNS()，除非你确实需要设置 XML 命名空间中的属性。通过遵循这个简单的规则，可以避免 SVG 元素无法正确渲染的问题，并确保你的页面能够正确显示 SVG 图形。
以上就是使用 JavaScript 动态渲染 SVG 元素时浏览器不显示的问题解决的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1513286.html
微信扫一扫 
支付宝扫一扫 
