html页面中js动态新建svg元素

最新推荐文章于 2025-05-30 20:43:01 发布

w_liujun

最新推荐文章于 2025-05-30 20:43:01 发布

阅读量5.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html5 文章标签： svg js html

本文链接：https://blog.youkuaiyun.com/w_liujun/article/details/39926205

html5 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在HTML页面中利用JavaScript动态生成SVG元素。通过`onload`事件触发`init`函数，实现SVG图形在div容器内的动态创建，以此实现网页的图形交互功能。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" xml:lang="en">
<head>
<title>SVG test</title>
<script type="text/javascript">
function init()
{
var svgLayer = document.getElementById('svgLayer');
var svgNS="http://www.w3.org/2000/svg";
var nodeRect = document.createElementNS(svgNS,"rect");
nodeRect.setAttribute("height",200);
nodeRect.setAttribute("width",200);
nodeRect.setAttribute("x",10);
nodeRect.setAttribute("y",10);
nodeRect.setAttribute("fill","#FFFFFF");
nodeRect.setAttribute("stroke","#000000");
nodeRect.setAttribute("onclick","graphClick(evt)");

var animateGraph = document.createElementNS(svgNS,"animate");
animateGraph.setAttribute("attributeType","XML");
animateGraph.setAttribute("attributeName","x");
animateGraph.setAttribute("from","50");
animateGraph.setAttribute("to","400");
animateGraph.setAttribute("dur","3s");
animateGraph.setAttribute("begin","3s");
animateGraph.setAttribute("repeatCount","indefinite");

nodeRect.appendChild(animateGraph);

var svgContext =nodeRect.outerHTML;
svgLayer.innerHTML=svgContext;
}

function graphClick(evt)
{
var target = evt.target;
target.setAttribute("fill","#003C9D");
}
</script>
</head>