Svg图片在asp网站上的使用

浏览数：19 / 时间：2015年06月09日

最近需要做一个动态的根据后台的返回数据而动态显示的导航图，然后我就采用了jquery+ajax+SVG矢量图来实现这个功能。

首先，客户给了个ai的矢量图，我对这一块不懂就找以前同事帮我转成了svg图形，听说很简单，但是矢量图是封闭的情况下。

然后，我就开始研究这个SVG图形的使用：　　

　　1.SVG图形可以放在embed和iframe标签，虽然embed标签在低版本的浏览器里不支持，但是从长久考虑和技术角度个人觉得放到embed标签里更合适。

　　在这个地方只有一个需要注意的地方，svg图片的路径要和网站的路径或域名保持一致。这个问题我也不清楚怎么解释，只能说是个人经验之谈。例如说网站地址是：‘www.baidu.com’,那么embed上的src就应该是‘www.baidu.com/.../xxx.svg’而不是‘~/../xxx.svg’　　

1 <embed id="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 @*<iframe id="emSvg" style="width:500px;height:500px" src="http://visitorreg.sialchina.cn/sc/chn/content/images/navsvg.svg"></iframe>*@

View Code

　　2.我这个项目里需要控制的是SVG里面不同模块的背景色。这个就是这个项目里的重头戏了。首先你要知道svg里面各个模块的ID或者是其他能让你通过选择器明确找到你要选择的那个模块。这个如果是自己制作SVG图形的话，尽量按照自己后期要使用的规则对各个模块进行规范。要不就的像我这样自己用浏览器打开，然后找到相应的模块最后再去给这些个模块相应的ID，幸运的是众多模块里我只用10个，所以说多了都是泪啊。下面是我获取相应的模块并修改背景颜色的代码，不过使用embed和Iframe有一点稍微的区别。

　　embed标签下面　　

 $("#emSvg")[0].getSVGDocument().getElementById(items[i]).setAttribute("fill", "green")

　　Iframe标签下面

 emSvg.getSVGDocument().getElementById(items[i]).setAttribute("fill", "green")

　　3前面说到了embed标签在低版本的浏览器不支持，这个就需要我们使用一个插件Adobe SVG Viewer来解决，但是我觉得，这个是暂时的，科技互联网发展越来越快，ie9一下的低版本的浏览器慢慢也会淡出人们的生活。

            if (brows.msie){        
                if ($.browser.version<9){
                    $("#ieMsg").css("display","");                
                }
            }

 <span id="ieMsg" style="display: none"><a href="" style="color: red; font-weight: bold; font-size: 14px">若图片无法正确显示导航效果，请点击安装Adobe SVG Viewer插件。</a>
        </span>