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