動態(tài)添加元素

x坐標值y坐標值文本內容

動態(tài)添加元素

var svgDoc = null;

var time = null;

// 動態(tài)添加元素

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

}

總結

以上是生活随笔為你收集整理的java 读取svg元素_svg动态添加元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。