var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "");
svg.setAttribute("height", "");
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", "");
r.setAttribute("y", "");
r.setAttribute("width", "50%");
r.setAttribute("height", "50%");
r.addEventListener("click", function () { alert('clicked'); });
svg.appendChild(r);

JS动态创建SVG元素并绑定事件的更多相关文章

  1. jquery 动态创建的元素,绑定事件无效之解决方法

    今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...

  2. js动态添加的元素不能绑定事件

    动态生成的元素,使用.on绑定事件,比如$(document).on("click",".divclick",function(){})

  3. js动态创建的元素绑定事件

    新创建的元素用传统的办法无法绑定,需要用live方法. 例: $('.rule').live('mouseover', function () { $(this).addClass("can ...

  4. js动态追加的元素如何触发事件

    一般通过js或者jQuery动态添加的元素标签,通过该元素标签.class.id触发事件,是无效的.如下所示: <body> <input type="text" ...

  5. 【原生js】js动态添加dom,如何绑定事件

    首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...

  6. 使用jquery日期选择器flatpickr.js,使用js动态创建input元素时插件失效

    最近写页面时需要用到,日期选择器,网上搜索了一些插件,最后使用了flatpickr.js.我是从npm 上拉下的依赖  npm install flatpickr --save 随后在页面中引入css ...

  7. jq动态添加的元素触发绑定事件无效

    <div class='a'> <div class='b'> </div> 其中$('.a')是html页面的元素,$('.b')是jq动态添加的元素.$(&qu ...

  8. 使用addeventlistener为js动态创建的元素添加事件监听

    点击li弹出内容,并且动态添加li之后有效 <button onclick="addFunction()">点我增加</button> <ul> ...

  9. JS动态添加的标签无法绑定事件解决方案~~~

    今天用ajax实现动态插入数据时发现监听一直不起作用,一样的代码,非动态的就可以监听实现 这是困扰了我近一个小时的bug,后面才理解到可能是动态插入导致的! 看了看网上的解决方案,似乎都不太通俗,讲的 ...

随机推荐

  1. 写一个Android输入法02——候选窗、转换

    上一篇介绍了完成Android输入法的最小化步骤,它只能将按键对应的字符上屏.一般的东亚语言都有一个转换的过程,比如汉语输入拼音,需要由拼音转成汉字再上屏.本文将在前文基础上加入完成转换过程所必需的候 ...

  2. 【bzoj2186】: [Sdoi2008]沙拉公主的困惑 数论-欧拉函数

    [bzoj2186]: [Sdoi2008]沙拉公主的困惑 考虑当 gcd(a,b)=1 则 gcd(nb+a,b)=1 所以[1,N!]与M!互质的个数就是 筛出[1,M]所有的素数p[i] 以及逆 ...

  3. 黑马MySQL数据库学习day04 MySQL变量 存储过程 用户和授权管理

    /* MySQL中的变量局部变量,用户变量,会话变量和全局变量. 用户变量不用定义,直接使用. 1.用户变量赋值 set @xxx = 值; 2.查询 select @xxx; 语法帮助: 过程保存在 ...

  4. mybatis逆向工程工具

    mybatis逆向工程 package com.cxy; import java.io.File; import java.util.*; import org.mybatis.generator.a ...

  5. HashMap 1.8的源码分析三

    线程安全问题: 在添加时候并没有进行安全考虑,枷锁 所以是线程不安全的,接下来进行代码测试; package com.mmall.concurrency.example.commonUnsafe; i ...

  6. linux curl命令:curl: (7) couldn't connect to host ?

    linux curl命令:curl: (7) couldn't connect to host ? 使用linux命令 curl http://www.test.com 出现如下错误:curl: (7 ...

  7. js 遍历tree的一个例子(全遍历),更复杂的功能

    更复杂的功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  8. java中\r ,\n,\t等的含义

    \t 相当于tab,缩进,制表符\n NewLine 换行 \f 换页符 \r 回车 \" 转义 “\\ 转义 \

  9. JScrollPane (滚动面板)使用心得

    注意:使用滚动面板时,必须指定内部组件是哪个组件 JScrollPane的两种使用方式:. 方式一: //直接在创建滚动面板对象时,就指定所要显示的组件 //本例中所要显示的是jPanel JPane ...

  10. P4245 【模板】任意模数NTT

    Luogu4245 只要做三次的NTT,快的飞起 普通NTT,做9次 #include<cstdio> #include<cstring> #include<iostre ...