js动态添加svg节点

下面贴上完整代码。要注意一点：创建svg节点时，要使用createElementNS函数并传入节点名称的命名空间。否则创建出来的节点默认为html dom而不是svg dom。这样的话，将其append到svg节点下时，不会显示。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta content="width=device-width;initial-scale=1">
<script>function onLoad(){var mysvg = document.getElementById("svg_my");var rectObj = document.createElementNS("http://www.w3.org/2000/svg","rect");if(rectObj){rectObj.setAttribute("width",100);rectObj.setAttribute("height",100);rectObj.setAttribute("style","fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)");mysvg.appendChild(rectObj);alert("hello");}}window.onload = onLoad;
</script>
</head><body><svg id="svg_my" style="border:1px solid #000;width:200px;height:200px" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
</body>
</html>

————————————————

原文链接：https://blog.csdn.net/tomatomas/article/details/50442497

js动态添加svg节点相关推荐

js动态添加删除节点
转载于:https://www.cnblogs.com/jiaobaobao/p/6762692.html
js动态添加html元素绑定事件,JS实现动态添加DOM节点和事件的方法示例
本文实例讲述了JS实现动态添加DOM节点和事件的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: /p> "http://www.w3.org/TR/xht ...
form表单无法提交js动态添加的表单元素问题。。
第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url ...
layui upload.render上传组件js动态添加html后再次渲染
页面效果页面代码: <input type="hidden" name="mcBaunell" id="m ...
vue 动态添加click_vue，在模块中动态添加dom节点，并监听
vue向数组中动态添加数据 vue中数据更新通过v-model实现,向数组中添加数据通过push()实现,向shortcuts数组中动态添加newShortcut对象中的title和action th ...
js 动态添加 tabel 表格
js 动态添加 tabel 表格代码 <!DOCTYPE html> <html><head><title> new document </t ...
【原生js】js动态添加dom，如何绑定事件
首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...
原生js动态为table追加html,JS动态添加Table的TR，TD实现方法
本文实例讲述了JS动态添加Table的TR,TD实现方法.分享给大家供大家参考.具体实现方法如下: var tempRow=0; var maxRows=0; function insertRows( ...
MUI 里js动态添加数字输入框后，增加、减少按钮无效
https://www.cnblogs.com/ssjf/p/10193652.html numbox 的自动初化是在 mui.ready 时完成的 mui 页面默认会自动初始化页面中的所有数字输入框 ...

js动态添加svg节点

js动态添加svg节点相关推荐

最新文章

热门文章