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 动态添加元素与事件的更多相关文章

  1. jqery 动态添加元素 绑定事件

    jQuery动态添加元素: var url = "...";//服务地址 $.ajax({ type: 'post', url: url, data:{fireId:fireId} ...

  2. jQuery1.9为动态添加元素绑定事件以及获取和操作checkbox的选择属性

    1.jQuery为动态添加的元素绑定事件:在1.7之后,添加了live()方法,1.9后又被移除,1.9中可用on()方法: $(function() { $('.btn').on('click',  ...

  3. jquery html 动态添加元素绑定事件

    由于实际的需要,有时需要往网页中动态的插入HTML内容,并在插入的节点中绑定事件处理函数.我们知道,用Javascript向HTML文档中 插入内容,有两种方法, 一种是在写HTML代码写入JS,然后 ...

  4. js动态添加元素绑定事件问题

    //开始是直接普通写的绑定click事件 其中li a i 中的i是动态添加的 结果是触发不了..$("li a i").click(function () { $(this).m ...

  5. JS动态添加元素的事件动态绑定

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. jQuery动态添加元素事件

    在项目中遇到需要jQuery动态添加元素的事件,做了一个demo,方便以后遇到相同的问题可以用上: <!DOCTYPE html> <html> <head> &l ...

  7. jquery动态添加元素无法触发绑定事件的解决方案。

    jquery动态添加元素无法触发绑定的事件的解决方案. ╭(●`∀´●)╯二狗最近在工作中遇到一个问题,即当用jquery动态添加元素后,发现给动态添加的元素却无法触发事件(╯#-_-)╯╧═╧ ( ...

  8. jquerymobile动态添加元素之后不能正确渲染解决方法

    jquerymobile动态添加元素之后有些不能被正确渲染的解决方法: listview:               添加 jq(".detail").listview(&quo ...

  9. angular.element方法汇总以及AngularJS 动态添加元素和删除元素

    addClass()-为每个匹配的元素添加指定的样式类名after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点append()-在每个匹配元素里面的末尾处插入参数内容att ...

随机推荐

  1. UOJ450 复读机

    题意:n个位置,k种颜色.求有多少种方案使得每种颜色恰出现d的倍数次. 解:d=1就快速幂,n,k很小就DP,记得乘组合数来分配位置. d = 2 / 3的时候,考虑生成函数. f(x) = ∑[d ...

  2. C++ Builder VCL库函数简介

    C++ Builder VCL库函数简介 2002-07-05· · ··C++builder资源中心 1 2 3 下一页 一.BORLAND C++ BUILDER VCL的内存管理函数 1. Al ...

  3. 主机入侵防御系统(HIPS)分析

    主机入侵防御系统(Host Intrusion Prevent System,HIPS)是近几年出现并迅速发展的新兴产物,与传统意义的防火墙和杀毒软件不同,它并不具备特征码扫描和主动杀毒等功能,所以想 ...

  4. SpringCloud学习笔记(五):Ribbon负载均衡

    简介 Spring Cloud Ribbon是基于Netflix Ribbon实现的一套 客户端 负载均衡的工具 .(重点:客户端) 简单的说,Ribbon是Netflix发布的开源项目,主要功能是提 ...

  5. LOJ10157——皇宫看守(树形DP)

    传送门:QAQQAQ 题意:在一个树上放置守卫,使每一个节点都至少有相邻一节点放置守卫,使最终经费最少 思路:树形DP 首先会想到没有上司的舞会,0表示不放守卫,1表示放守卫,但考虑到对于当前点不放守 ...

  6. IT技术博客

    博客收藏大全: 陈皓博客: 陈硕的博客: 风云的博客: 当然我在扯淡: hellogirl: 田守枝Java技术博客: 廖雪峰博客: Milo游戏开发:

  7. 不小心使用vcpkg之后再使用conan,一直报链接错误

    原来是使用vcpkg的时候,不小心使用了.\vcpkg integrate install命令,把vcpkg到所有的vs项目(这个不需要什么其他的引用,但是容易起冲突) 然后卸载掉就好了,这篇文章真是 ...

  8. Leetcode201. Bitwise AND of Numbers Range数字范围按位与

    给定范围 [m, n],其中 0 <= m <= n <= 2147483647,返回此范围内所有数字的按位与(包含 m, n 两端点). 示例 1: 输入: [5,7] 输出: 4 ...

  9. C# Predicate委托

    Predicate在集合搜索和WPF数据绑定中用途广泛,其调用形式: 调用形式:Predicate<object>(Method)/Predicate<参数类型>(方法) 1. ...

  10. 图解nginx配置负载均衡

    1. 在Linux上准备两份tomcat 2. 修改两份tomcat的端口号 修改的端口如图所示: 3. 启动两个tomcat服务器 4. 修改两个服务器上的主页方便测试区分 5. 在nginx配置文 ...