HTML 页面中的 SVG|HTML 页面中的 SVG温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
惟有计算机能展示数学之美！
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(6052)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_084',
blogTitle:'在网页中加载SVG',
blogAbstract:'SVG(Scalable&Vector&Graphics)代表可升级矢量图象，是新一代图象格式的标准。它给Web开发人员提供了一种利用XML(Extensible&Markup&Language)创建静态图像和动态图像的方法，是图象技术上的一次革命。利用此技术，Web开发人员对页面进行更加精确的控制，SVG的动画片技术可以实现从简单的直线运动到复杂的3D螺旋变形的控制.&&
SVG&有许多其他图像方法所不具有的优点，下面就是其中一些：&&
1，和其它媒介兼容，比如无线设备等。&&
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:5,
publishTime:5,
permalink:'blog/static/',
commentCount:1,
mainCommentCount:1,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'惟有计算机能展示数学之美！',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}上一篇文章《》中，我们介绍了SVG的基本知识。在这篇文章中，我们将介绍在网页中使用SVG的各种方法，以及这些方法的浏览器持。
通过&img /&标签
这可能是最简单的使用SVG的方法，而且是开发者最熟悉的方法。SVG文件能够像位图一样通过&img /&标签在网页上使用。
&img src="svg/twitter-icon.svg" alt="Twitter" style="width: 300 height: 300"&
上图是在&img /&标签中使用SVG文件的结果。注意，图像的大小也可以通过SVG文件来修改。同样可以像其它元素一样在SVG图像上使用CSS样式。
菏泽医技术唯一的缺点是：SVG图像可能包含动画，但链接里面的文件和任何脚本和交互的SVG代码部分将被忽略。
浏览器支持
可以通过CSS来有效的使用SVG：像位图一样，SVG文件能够通过background-image实现来渲染。
header { background: url(assets/svg/columns.svg); }
浏览器支持
直接使用SVG标签
HTML5支持直接在页面中写SVG文件。这种方式保留了SVG的特性，只要你愿意放弃一些向后兼容浏览器的问题，这是目前最好的调用SVG的方式。特德书写代码类似下面的代码：
&!DOCTYPE html&
&html lang="en"&
&meta charset="utf-8" /&
&title&HTML5 page with SVG Content&/title&
&p&This is the markup of an ordinary HTML5 page.&/p&
&svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400px" height="400px"&
&path fill="#5DD7FC" d="M0.5… "/& &!--SVG document--&
浏览器支持
通过&object&、&iframe&和&embed&标签
当浏览器不支持SVG或使用受限制时，使用这些方法是最好的选择。
&object type="image/svg+xml" data="twitter-icon.svg"&
Warning for older browsers, or alternative content
&embed type="image/svg+xml" src="twitter-icon.svg" pluginspage="/svg/viewer/install/" /&
&iframe src="twitter-icon.svg"&
Warning for older browsers, or alternative content
上面显示了所有SVG的特性，它们能很好的兼容IE浏览器。
浏览器支持
通过@font-face作为字体使用
大多数字体都是矢量图形，SVG可以通过CSS来作为文字嵌入到网页中，从而替代.woft、.otf 和 .eof 格式的文字。代码像下面这样：
@font-face {
font-family: GabbaG url('gabbagabba.otf’) format('opentype’),
url('gabbagabba.svg#gabba’) format('svg’);
因为它们缺乏真正的字体控制如字距和有限的浏览器支持，应该在使用SVG文字时给它们一个回退的方法。
浏览器支持
还有其它一些使用SVG的方法，例如：CSS路径动画（可以参考：）和内容过滤器等等，将在以后的文章中一一讲解。
本文版权属于jQuery之家，转载请注明出处：2012年 总版技术专家分年内排行榜第一2007年 总版技术专家分年内排行榜第二2006年 总版技术专家分年内排行榜第二2004年 总版技术专家分年内排行榜第二
2005年 总版技术专家分年内排行榜第三2003年 总版技术专家分年内排行榜第三2002年 总版技术专家分年内排行榜第三
2016年2月 总版技术专家分月排行榜第二2014年2月 总版技术专家分月排行榜第二2013年4月 总版技术专家分月排行榜第二
2016年10月优秀小版主
2016年8月优秀小版主2016年7月优秀小版主优秀小版主2015年7月优秀小版主2015年9月优秀小版主2015年5月优秀小版主2014年11月论坛优秀版主
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。}