动态添加元素
<html>
<head></head>
<body>
<div>x坐标值<input id="xValue"></div>
<div>y坐标值<input id="yValue"></div>
<div>文本内容<input id="iText"></div>
<button id="add">动态添加元素</button>
<br/>
<iframe id="mySVG" src="map.svg" style="100%;height:400px;"></iframe>
</body>
<script src="jquery.min.js"></script>
<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").contentWindow.document;
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);
});
});
</script>
</html>
map.svg
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2377" height="2867"><defs>
<style type="text/css">
@font-face {
font-family: 'topology';
src: url('http://at.alicdn.com/t/font_1331132_h688rvffmbc.ttf?t=1569311680797') format('truetype');
}
</style>
</defs><g/></svg>