码迷,mamicode.com
首页 > Web开发 > 详细

Svg图片在asp网站上的使用

时间:2015-04-29 16:38:48      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:

最近需要做一个动态的根据后台的返回数据而动态显示的导航图,然后我就采用了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>

 

  

Svg图片在asp网站上的使用

标签:

原文地址:http://www.cnblogs.com/qzzy/p/4466085.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!