The use of SVG images on ASP sites

Recently, we need to make a dynamic navigation map that is dynamically displayed based on the back data of the background, and then I use the jquery+ajax+svg vector graph to do this function.

First of all, the customer gave a vector image of AI, I do not understand this piece to find former colleagues to help me to turn into SVG graphics, I heard it is very simple, but the vector diagram is closed case.

Then I started to look at the use of this SVG graph:

1.SVG graphics can be placed in the embed and IFRAME tags, although embed tags are not supported in the lower version of the browser, but from a long-term and technical point of view, it is more appropriate to put the embed tag.

There is only one place to be aware of this place, the path to the SVG image is consistent with the site's path or domain name. I don't know how to explain this question, but I can only say it is personal experience. For example, the website address is: ' www.baidu.com ', then embed on the SRC should be ' www.baidu.com/.../xxx.svg ' instead of ' ~/. /xxx.svg '

1 <EmbedID= "Emsvg"style= "width:800px;height:800px; margin:0 auto;display:block"src= "~/content/images/navsvg.svg"type= "Image/svg+xml"pluginspage= "http://www.adobe.com/svg/viewer/install/" />2 3 4 5@*<iframeID= "Emsvg"style= "width:500px;height:500px"src= "Http://visitorreg.sialchina.cn/sc/chn/content/images/navsvg.svg"></iframe>*@

View Code

2. What I need to control in this project is the background color of the different modules in SVG. This is the highlight of the project. First you need to know the ID of each module in SVG or something else that will allow you to explicitly find the module you want to select through the selector. If you are making SVG graphics yourself, try to standardize each module according to the rules you want to use later. Or just like me to open with a browser, and then find the corresponding module finally to the corresponding ID of these modules, fortunately, many modules I only use 10, so say more are tears AH. Here's my code to get the corresponding module and modify the background color, but there's a slight difference between using embed and IFRAME.

Under the EMBED tag

$ ("#emSvg") [0].getsvgdocument (). getElementById (Items[i]). SetAttribute ("Fill", "green")

Under the IFRAME tag

Emsvg.getsvgdocument (). getElementById (Items[i]). SetAttribute ("Fill", "green")

3 in front of the embed tag is not supported in the lower version of the browser, this requires us to use a plugin Adobe SVG viewer to solve, but I think, this is temporary, the technology of the Internet is growing faster, IE9 the low version of the browser will slowly fade out of people's lives.

            if (Brows.msie) {                        if ($.browser.version<9) {                    $ ("#ieMsg"). CSS ("Display", "") ;                                }            

<id= "iemsg"  style= "Display:none"><  href ="" style = "color:red; font-weight:bold; font-size:14px" > If the picture does not display the navigation correctly, click Install the Adobe SVG Viewer plugin. </ a >        </ span >

　　

The use of SVG images on ASP sites