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. Django会话,用户和注册之cookie

    HTTP状态和TCP不一样,HTTP是无状态的,也就是这一次请求和下一次请求之间没有任何状态保持,我们无法根据请求例如IP来识别是否在同一人的连续性请求.就像我们在访问网站的时候,输入了用户名和密码, ...

  2. 基于vue实现上下滑动翻页效果

    18年年底的时候,一直在做年度报告的H5页面,因为项目需要,需要实现上下滑动翻页,并且上滑的页面比正常页面的比例要缩小一定比例. 效果类似于http://www.17sucai.com/pins/de ...

  3. 在docker容器中安装vim命令进行编辑文件

    首先执行: 执行apt-get update, 然后再次执行apt-get install vim即可成功安装vim. 然后我们就可以使用vim编辑 如果不进行更新就会报错: 此时会报出bash: v ...

  4. 【Leetcode】Single Number

    Given an array of integers, every element appears twice except for one. Find that single one. Note:Y ...

  5. import与from...import...的区别

    from ... import ... 的用法和直接import的区别: 1.直接使用import时,如果需要使用到导入模块内的属性和方法,必须使用模块名.属性和模块名.方法的方式进行调用 2.使用f ...

  6. Vim 编辑器中全选操作

    ggVG  解释: gg 让光标移到首行,在vim才有效,vi中无效 V   是进入Visual(可视)模式 G  光标移到最后一行

  7. Kibana6.2.x 插件理解

    官方地址:https://www.elastic.co/guide/en/kibana/current/development-uiexports.html Type Purpose hacks An ...

  8. Codeforces - 625B 贪心

    求最小不重复匹配次数 改最后一个字符最划算 我当时怎么就没看出来.. #include<bits/stdc++.h> using namespace std; string S,T; in ...

  9. SQL全文搜索引擎 Sphinx

    Sphinx是一个基于SQL的全文检索引擎,可以结合MySQL,PostgreSQL做全文搜索, 它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索.   Sphinx特别 ...

  10. spring espect XX but YY

    注入和查找问题 HSF Consumer bean, 注入的是beanName='实际接口名', type='HSFSpringConsumerBean',  造成Autowire时查询出来的类型不匹 ...