原文地址：http://blog.csdn.net/tomatomas/article/details/50442497

原文作者：番茄大圣

创建svg节点时，要使用createElementNS函数并传入节点名称的命名空间。

否则创建出来的节点默认为html dom而不是svg dom。

这样的话，将其append到svg节点下时，不会显示。

<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",);

            rectObj.setAttribute("height",);

            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>

【转载】动态新增svg节点的更多相关文章

  1. es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  2. jquery中动态新增的元素节点无法触发事件解决办法

    在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的,我们下面就为各位来详细的介绍此问题的解决办法． 比如做一个ajax读取留言列表的时候,每条留言后面有个回复按钮,class为“re ...

  3. 解决jQuery ajax动态新增节点无法触发点击事件的问题

    在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="" ...

  4. Hadoop概念学习系列之Hadoop集群动态增加新节点或删除已有某节点及复制策略导向 （四十三）

    不多说,直接上干货! hadoop-2.6.0动态添加新节点 https://blog.csdn.net/baidu_25820069/article/details/52225216 Hadoop集 ...

  5. js动态创建style节点(js文件中添加css)

    ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章 --------------------- 有很多提供动态创建 ...

  6. 【实践】js 如何实现动态添加文本节点

    对于我这个js 小白来说 今天鼓起勇气做起了邮箱认证这个特效 但是这次不是想说如何实现这这个特效而是想记录一下特效当中的某个部分 那就是向元素节点动态添加文本节点 百度了一下动态添加文本节点的方式 是 ...

  7. ligerui_ligerTree_007_ligerTree动态加载节点

    ligerui:ligerTree:动态加载节点: 源码地址:http://download.csdn.net/detail/poiuy1991719/8571255 效果图: 代码:json.txt ...

  8. ligerui_ligerTree_005_动态增加“树”节点

    动态添加ligerTree节点:效果图: 源码地址:http://download.csdn.net/detail/poiuy1991719/8571255 <%@ page language= ...

  9. 分享：根据svg节点对象类型和路径值转换坐标值

    功能用处: 对svg文件的路径节点填充时会使用(相邻两个坐标区域内的四边形的填充颜色不重复). 需要对svg文件中的Path节点或者 Polyline 节点做颜色填充.并且相邻的两个区域之间的颜色不允 ...

随机推荐

  1. MWeb 2.0.7 版发布！

    更新前针对 MAS 上的评论重点说一下:MWeb 是支持直接对本地文件夹操作的,不用导入到文档库!请使用外部模式!请使用外部模式!!请使用外部模式!!! 重要的话讲三次!使用方法是 CMD + E 打 ...

  2. Git 取消跟踪已版本控制的文件

    http://www.cnblogs.com/cposture/p/git.html 转: Git 是一个很好的版本控制工具,当然驾驭起来相比 SVN 要稍微复杂一些.初入 Git,难免有一些问题.比 ...

  3. laravel5.3----------调度任务以及Artisan

    1.在使用的过程中会遇到有些函数不能用需要在php配置文件里面打开: disable_functions = exec,passthru,popen,proc_open,shell_exec,syst ...

  4. ferret32位安装

    首先在网上找到解决方案: 1.添加对32位的支持 dpkg --add-architecture i386 2.更新 apt-get clean && apt-get update & ...

  5. Art-template模板

    1.介绍 新一代 javascript 模板引擎. 2.性能(引) 1.性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍(性能测试) 2.支持运行时调试,可精确定位异常模板所在 ...

  6. Javascript模块化编程（二）：AMD规范（转）

    这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要 ...

  7. Windows Phone 五、配置存储

    基本存储形式 本地设置:ApplicationData.Current.LocalSettings 漫游设置:ApplicationData.Current.RoamingSettings 支持的数据 ...

  8. 手贱的回忆录 --- L版openrc密码修改（OS_PASSWORD）

    ---恢复内容开始--- 刚刚部署完L版,发现默认登录的管理员账号在41.42.43的openrc文件中,登录名是admin,登录密码却是一串随机码,于是想修改一个简单易记的密码,手贱的把OS_PAS ...

  9. HashSet的故事----Jdk源码解读

    Hash,我们在说HashMap的时候,已经知道Hash是散列,Map是映射了. 那么Set又是什么呢 ? 先来看看Set的翻译是什么 n. [数] 集合:一套:布景:[机] 装置 这里Set所取的含 ...

  10. 用node.js给图片加水印

    一.准备工作: 首先,确保你本地已经安装好了node环境.然后,我们进行图像编辑操作需要用到一个Node.js的库:images.这个库的地址是:https://github.com/zhangyua ...