javascript操作svgDom，實現地圖功能

1、客戶要求做一個店鋪地圖，進入店鋪可以查看該店鋪樓層所有的店鋪信息，點擊地圖地圖上某塊區域，展示相應的店鋪信息。（提供樓層篩選，公共設施查詢），以及地圖縮放。客戶要求地圖通過H5來操作svg圖片來實現，展示則采用js調用原生方法展示對應的店鋪信息。

 

svg圖片可以通過<img/><object><iframe><embed>四個標簽直接載入到網頁中。

<img>標簽載入svg圖像無法獲取到svgDom，故只能采用另外三個標簽。

三種標簽獲取dom方法如下：

html頁面載入：

獲取對應的svgDom

這里我采用的是iframe去加載svg圖片，因為我在地圖頁面提供樓層的菜單，點擊不同的樓層局部刷新載入不同的svg圖片。（object，embed我都試過，點擊不同樓層時，頁面沒有重新加載不同樓層的svg圖片）。

注意：采用iframe獲取svgDom時，必須等到iframe加載完成后，在調用document.getElementById('iframe').contentDocument獲取svgDom，否則會獲取不到svgDom。我是這樣寫的：

if(iframe.attachEvent){
    iframe.attachEvent('onload', function(){
        alert('iframe is loaded')
    })
}else{
    iframe.onload = function(){
　　　　//這里獲取svgDom
　　　　var iframeSvg = document.getElementById('iframe').contentDocument;
　　　　//接下來就可以對svgDom進行操作，綁定元素點擊事件，改變元素的屬性等等
　　　　//給svg上id為‘L01N01’的元素綁定點擊事件
　　　　iframeSvg.getElementById('L01N01').addEventListener('click',function(){
　　　　　　//點擊事件操作
　　　　})
　　}
}

附錄：
參考文章：http://javascript.ruanyifeng.com/htmlapi/svg.html