JavaScript operation svgdom for map function

1, the customer requested to do a shop map, enter the store can view all the shop floor information, click on the map map of a block area, display the corresponding store information. (Provides floor screening, public facility inquiries), and map scaling. The customer requests the map through the H5 to operate the SVG picture to realize, the display uses the JS call native method to display the corresponding store information.

SVG images can be loaded directly into a Web page via <object><iframe><embed> four tags.

tags loading svg images cannot be obtained to svgdom, so only three additional tags can be used.

Three kinds of tags get DOM methods as follows:

HTML page Loading:

Get the corresponding Svgdom

Here I am using an iframe to load SVG images, because I am on the map page to provide the floor menu, click on different floors local refresh loading different SVG pictures. (object,embed I have tried to click on different floors, the page did not reload the SVG images on different floors).

Note: When using an iframe to get svgdom, you must wait until the IFRAME is loaded and call document.getElementById (' iframe '). Contentdocument get Svgdom, Otherwise, you will not get the svgdom. That's what I wrote:

if (iframe.attachevent) {
    Iframe.attachevent (' onload ', function () {
        Alert (' iframe is loaded ')
    })
}else{
    Iframe.onload = function () {
Get Svgdom here
var iframesvg = document.getElementById (' iframe '). Contentdocument;
Next, you can manipulate the svgdom, bind elements, click events, change the attributes of the elements, and so on.
Bind a point-and-click event to an element with Id ' l01n01 ' on SVG
Iframesvg.getelementbyid (' L01n01 '). AddEventListener (' click ', function () {
Click event Action
})
}
}

Appendix:
Reference article: http://javascript.ruanyifeng.com/htmlapi/svg.html
     

JavaScript operation svgdom for map function