动态添加元素

动态添加元素

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);

});

});

map.svg

@font-face {

font-family: 'topology';

src: url('http://at.alicdn.com/t/font_1331132_h688rvffmbc.ttf?t=1569311680797') format('truetype');

}