首页 > 文章 > 前端

JS渲染SVG不显示？这些方法能解决！

时间：2025-08-11 22:42:29 489浏览收藏

还在为JavaScript渲染SVG不显示而烦恼吗？本文针对使用JavaScript动态生成包含SVG元素的HTML页面时，SVG元素无法正常显示的问题，提供了一套详细的解决方案。通过分析问题根源，指出`setAttributeNS`的误用是常见原因，并提供清晰的代码示例，演示如何正确使用`setAttribute`方法来设置SVG属性，从而确保SVG元素能够被正确渲染。阅读本文，你将学会避免此类问题，轻松实现SVG元素的动态渲染，提升Web开发效率和用户体验。

使用 JavaScript 动态渲染 SVG 元素时浏览器不显示的问题解决

本文旨在解决在使用 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 元素的属性。

完整示例代码

以下是完整的示例代码，展示了如何使用修改后的 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 图形。

到这里，我们也就讲完了《JS渲染SVG不显示？这些方法能解决！》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！