SVG 動態新增元素與事件
阿新 • • 發佈:2019-01-02
SVG檔案是由各個元素組成。元素由標籤定義,而標籤格式即html的元素定義格式。但是載入一個SVG檔案,卻無法通過常規的js獲取物件方式來獲取到SVG中定義的元素,更無法通過這種方式來動態新增SVG元素與事件。 SVG元素的操作都要藉助於SVG的document物件。SVG的document物件獲取方式為:
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); }); });