使用 JavaScript 动态渲染 SVG 元素时浏览器不显示的问题解决-js教程-PHP中文网

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

DDD

发布： 2025-08-02 15:32:01

原创

885人浏览过

使用 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 元素的属性。

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

查看详情

立即学习“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 图形。

以上就是使用 JavaScript 动态渲染 SVG 元素时浏览器不显示的问题解决的详细内容，更多请关注php中文网其它相关文章！