JS动态创建SVG元素并绑定事件

最新推荐文章于 2025-06-06 10:40:44 发布

转载最新推荐文章于 2025-06-06 10:40:44 发布 · 838 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yzeng/p/3790690.html

文章标签：

#javascript #ViewUI

本文介绍如何在网页中使用SVG创建容器并添加元素的方法，包括创建SVG容器、设置属性、添加子元素及事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.setAttribute("width", "800");
    svg.setAttribute("height", "500");
    svg.addEventListener("load", function () { alert('loaded'); });
    document.body.appendChild(svg);

以上代码可创建SVG容器并追加到body元素下，如果要添加元素，使用以下代码：

   var r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    r.setAttribute("fill", "#120045");
    r.setAttribute("x", "1");
    r.setAttribute("y", "1");
    r.setAttribute("width", "50%");
    r.setAttribute("height", "50%");
    r.addEventListener("click", function () { alert('clicked'); });
    svg.appendChild(r);