SVG 动态添加元素与事件
SVG文件是由各个元素组成。元素由标签定义,而标签格式即html的元素定义格式。但是载入一个SVG文件,却无法通过常规的js获取对象方式来获取到SVG中定义的元素,更无法通过这种方式来动态添加SVG元素与事件。 SVG元素的操作都要借助于SVG的document对象。SVG的document对象获取方式为:
SVG 快速入门
svgDoc = document.getElementById("mySVG").getSVGDocument();其中mySVG为SVG主体的id。注意需要在SVG完全加载完成后才可获取,否则获取到的是null。
然后调用svgDoc. createElementNS()函数即可创建SVG元素,为创建的元素进行属性设置,
并绑定事件监听器。最后调用svgDoc.rootElement.appendChild()函数来将创建的元素添加给svgDoc。
示例代码:
<embed id="mySVG" src="map.svg" type="image/svg+xml" />
<div>x坐标值<input id="xValue"></div>
<div>y坐标值<input id="yValue"></div>
<div>文本内容<input id="iText"></div>
<button id="add">动态添加元素</button>
<script>
var svgDoc = null;
var time = null;
// 动态添加元素
var addElement = function(x, y, nodeText) {
// 添加圆形
var c = svgDoc.createElementNS('http://www.w3.org/2000/svg', 'circle');
c.setAttribute('cx', x);
c.setAttribute('cy', y);
c.r.baseVal.value = 7;
c.setAttribute('fill', 'red');
c.addEventListener("click", function() {
alert('圆形点击测试:' + nodeText);
});
c.addEventListener("mouseover", function() {
console.log('圆形鼠标悬停测试:' + nodeText);
});
svgDoc.rootElement.appendChild(c);
// 添加文本
var t = svgDoc.createElementNS('http://www.w3.org/2000/svg', 'text');
t.setAttribute("x", parseInt(x) + 5);
t.setAttribute("y", parseInt(y) + 10);
t.setAttribute("font-size", "20");
t.setAttribute('fill', 'green');
t.addEventListener("click", function() {
alert('文本点击测试:' + nodeText);
});
t.addEventListener("mouseover", function() {
console.log('文本鼠标悬停测试:' + nodeText);
});
t.innerHTML = nodeText;
svgDoc.rootElement.appendChild(t);
};
// 载入SVG
var loadSvg = function() {
svgDoc = document.getElementById("mySVG").getSVGDocument();
if(svgDoc == null) {
time = setTimeout("loadSvg()", 300);
} else {
clearTimeout(time);
loadCallback();
}
};
// 载入回调
var loadCallback = function() {
console.log("加载完成");
};
$(function() {
// 延迟加载
setTimeout("loadSvg()", 300);
// 按钮
$("#add").click(function() {
var nodeText = $("#iText").val();
if(nodeText == "") {
nodeText = "未输入文本";
}
console.log(nodeText);
addElement($("#xValue").val(), $("#yValue").val(), nodeText);
});
});
SVG 动态添加元素与事件的更多相关文章
- jqery 动态添加元素 绑定事件
jQuery动态添加元素: var url = "...";//服务地址 $.ajax({ type: 'post', url: url, data:{fireId:fireId} ...
- jQuery1.9为动态添加元素绑定事件以及获取和操作checkbox的选择属性
1.jQuery为动态添加的元素绑定事件:在1.7之后,添加了live()方法,1.9后又被移除,1.9中可用on()方法: $(function() { $('.btn').on('click', ...
- jquery html 动态添加元素绑定事件
由于实际的需要,有时需要往网页中动态的插入HTML内容,并在插入的节点中绑定事件处理函数.我们知道,用Javascript向HTML文档中 插入内容,有两种方法, 一种是在写HTML代码写入JS,然后 ...
- js动态添加元素绑定事件问题
//开始是直接普通写的绑定click事件 其中li a i 中的i是动态添加的 结果是触发不了..$("li a i").click(function () { $(this).m ...
- JS动态添加元素的事件动态绑定
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery动态添加元素事件
在项目中遇到需要jQuery动态添加元素的事件,做了一个demo,方便以后遇到相同的问题可以用上: <!DOCTYPE html> <html> <head> &l ...
- jquery动态添加元素无法触发绑定事件的解决方案。
jquery动态添加元素无法触发绑定的事件的解决方案. ╭(●`∀´●)╯二狗最近在工作中遇到一个问题,即当用jquery动态添加元素后,发现给动态添加的元素却无法触发事件(╯#-_-)╯╧═╧ ( ...
- jquerymobile动态添加元素之后不能正确渲染解决方法
jquerymobile动态添加元素之后有些不能被正确渲染的解决方法: listview: 添加 jq(".detail").listview(&quo ...
- angular.element方法汇总以及AngularJS 动态添加元素和删除元素
addClass()-为每个匹配的元素添加指定的样式类名after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点append()-在每个匹配元素里面的末尾处插入参数内容att ...
随机推荐
- iscroll 上拉加载和下拉刷新
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- win7+64位笔记本安装TensorFlow CPU版
最近要用到Keras框架,而Keras是基于Theano或Tensorflow框架安装的,所以首先要准备底层框架的搭建. 在网上看了一大堆教程头昏脑涨,随便挑了个试一试,竟然捣鼓成功了,记录一下安装过 ...
- iOS之CGPath相关属性(一)
#ifndef CGPATH_H_ #define CGPATH_H_ForeverGuard博客园 #include <CoreFoundation/CFBase.h> #include ...
- Linux CentOS CapsLock 大小写反转问题 解决
虚拟机centos7,输入大小写字母反了,开启capslock的时候变成小写字母了,关闭则变成大写了... 只需要执行 setleds +caps 或 setleds -caps 即可,如图:
- 在scrapy中过滤重复的数据
当为了确保爬到的数据中没有重复的数据的时候,可以实现一个去重的item pipeline 增加构造器方法,在其中初始化用于对与书名的去重的集合 在process_item方法中,先取出item中要判断 ...
- ch5 vlsms
Variabel Length Subnet Mask vlsms 较早的路由协议 ripv1 没有为子网准备的字段,子网信息会被丢失. 这意味着如果一个路由器运行着一个rip协议具有一个确定的子网掩 ...
- Windows 系统文件夹目录挂载到 Linux服务器中
在Windows系统文件上传到Linux服务器时有时候很麻烦,因为Linux无界面的系统不像Windows系统一样,可以直接复制粘贴,下面方法可以解决Windows系统文件拷贝到Linux服务器. 1 ...
- string字符串 获取指定位置范围的子字符串
string str1="12345678"; str1.Substring(0,4);其中0表示要取得字符串的起始位置,4就是要取得字符串的长度 结果是 "1 ...
- elasticsearch java 索引操作
1.添加maven依赖 <dependency> <groupId>org.elasticsearch</groupId> <artifactId>el ...
- Mkdir- Linux必学的60个命令
1.作用 mkdir命令的作用是建立名称为dirname的子目录,与MS DOS下的md命令类似,它的使用权限是所有用户. 2.格式 mkdir [options] 目录名 3.[options]主要 ...