最近需要做一个动态的根据后台的返回数据而动态显示的导航图,然后我就采用了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’
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>*@
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>