首页 > 下载 > 下载详文:Html5 的 SVG功能介绍

Html5 的 SVG功能介绍

发布时间:2011年11月21日 23时03分00秒   属性:程序Web开发 > Javascript/Html    访问次数:94725
字体: 初始 添加收藏 分享给好友
Html5 的 SVG功能介绍

在Html5中有两种绘图方式,一种是Canvas,一种是SVG ;在以前的Html5 canvas 标签Html 5文字效果显示文章中都有介绍到,在这两篇文章示例中都有直接间接涉及到。在本文中将介绍SVG的图形绘制与使用。同样SVG也是矢量呈现(缩放矢量呈现),与Canvas有所不同,SVG是一种XML标记语言,它既可以单独保存以".svg"后缀的文件在浏览器中打开显示,也支持建立SVG标记直接嵌入在网页中显示,还可以通过<embed src="文件.svg" name="name自命" type="image/svg+xml" height="300" width="450">将SVG嵌入到页面中,和Canvas一样也可以响应脚本事件操作和控制,下面是相关示例展示。

SVG 的形状shapes :rect、circle、ellipse、line、polyline和polygone,以及image

在SVG中绘制呈现图形物体,有rect/矩形(方形) 、circle/圆形、ellipse/椭圆、line/线、polyline/多边交叉线和polygone/多边形可以使用,在Html页面中以<svg width="300" height="250" xmlns="http://www.w3.org/2000/svg"></svg>格式建立SVG标签,然后在标签里面进行绘制。下面是呈现矩形和圆形椭圆效果。

HTML SVG 代码  复制
<body > <svg width="300" height="250" xmlns="http://www.w3.org/2000/svg"> <rect x="5" y="5" width="60" height="60" fill="green"/> <rect x="70" y="5" rx="5" ry="5" width="60" height="60" fill="red"/> <circle cx="165" cy="35" r="30" fill="orange"/> <ellipse cx="230" cy="35" rx="30" ry="20" fill="blue"/> </svg> </body>

效果如下

接着展示line/线、polyline/多边交叉线和polygone/多边形效果,以及image的使用。按照上面的svg方式建立标签,定义标签对象,在image标签中指定图片。下面是详细svg代码。

HTML SVG 代码  复制
<body > <svg width="300" height="250" xmlns="http://www.w3.org/2000/svg"> <line y2="116" x2="100" y1="67" x1="25" stroke-width="5" stroke="#ff0000" fill="none"/> <path d="m263,49l-9,76l82,-48l-123,-13l50,-15z" stroke-width="5" stroke="#000000" fill="#ff7f00"/> <polyline stroke-width="6" fill="none" stroke="#3f7f00" points="121,53 192,124 121,124 192,53 "/> <image xlink:href="image/DSCF9984580100.png" x="360" y="30" width="100" height="100" /> </svg> </body>

效果如下

SVG 的text/文字效果

svg的text标签支持渐变填充,也支持文字拾取曲线排列文字,需要预先定义渐变填充在<defs></defs>中,当文字拾取路径排列是也需要在<defs></defs>中预先定义。下面是详细代码示例展示。

HTML SVG 代码  复制
<svg width="300" height="250" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_8"> <stop stop-color="#ff0000" offset="0"/> <stop stop-color="#ffff00" offset="1"/> </linearGradient> </defs> <text font-weight="bold" font-style="normal" xml:space="preserve" text-anchor="middle" font-family="Arial Black" font-size="24" id="svg_7" y="53" x="107" stroke-width="0" stroke="#000000" fill="url(#svg_8)">weisim3.com</text> <defs> <path d="m220.98885,39.69102c84.91158,149.91641 241.80937,-74.29949 260.99889,5.65374" fill="black" transform="rotate(-0.474251, 351.488, 60.1133)" id="fontPath"/> </defs> <text fill="url(#svg_8)"> <textPath xlink:href="#fontPath"> www.weisim3.com 22.11.2011 - Html5 SVG </textPath> </text> </svg>

效果如下

SVG 的鼠标事件和动画

SVG可以直接支持动画和鼠标触发事件,也支持javascript脚本响应事件,在本文仅在介绍SVG标签中的鼠标事件和动画。click事件<set attributeName="fill" to="red" begin="click"/>,在SVG中触发click事件,attributeName是类型这里fill是指填充,to="red"是点击之后填充为红色,attributeName支持visibility、opacity、width等属性。动画<animateMotion from="0,260" to="180,100" dur="5s" fill="freeze"/>,这里动画from="0,260"为平面坐标点,x轴为0,y轴为260;to="180,100"则是动画移动到"180,100"位置;dur="5s"为帧速。动画<animateTransform>为自由变换如图形旋转、缩放主要用此属性,下面是动画鼠标事件详细代码。

HTML 代码  复制
<body> <svg width="300" height="250" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="35" r="30" fill="green"> <set attributeName="fill" to="red" begin="click"/> </circle> <rect x="100" y="10" width="40" height="50" fill="orange"> <animate attributeName="width" dur="5s" from="10px" to="20px" accumulate="sum" additive="sum" repeatCount="10" begin="click" /> </rect> <rect fill="orange" stroke="red" stroke-width="5px" x="0px" y="0px" width="115px" height="115px"> <animateMotion from="0,260" to="180,100" dur="5s" fill="freeze"/> </rect> </svg> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" > <rect fill="#AFBCC7" stroke="blue" stroke-width="5px" x="200px" y="100px" width="60px" height="60px"> <animateTransform attributeType="XML" attributeName="transform" type="rotate" from="0,150,150" to="360,150,150" begin="0s" dur="5s" repeatCount="indefinite"/> </rect> <circle fill="#c5ff86" stroke="#38521d" stroke-width="5px" cy="37" cx="148" r="30" > <animateTransform attributeType="XML" attributeName="transform" type="scale" from="0" to="1" dur="5s" fill="freeze"/> </circle> </svg> </body>

效果如下

目前SVG支持最好的是Firefox和 Google的Chrome,IE浏览器是9.0开始支持SVG,Safari也支持,目前IE和Safari对SVG的动画和事件触发不能全部支持。从这些示例中看可以在html5中图形图像矢量呈现完全无需flash的嵌入即可达到同样的效果。只是目前阶段SVG的动画还有兼容问题, SVG相比Canvas它支持直接从表示XML中定义对象图像,这从上面的事例中以看到,Canvas目前是通过Javascript定义,Canvas目前的动画事件触发基本支持所有最新版的浏览器。另外可以使用Google上有个svg-edit在线SVG编辑器http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html,此外Adobe的Illustrator也可以绘制svg,不久可能将会在更多html编写工具中将会集成这一可视化编辑功能。

免费
Html5 的 SVG功能介绍 (27)
本下载连接不支持第三下载工具打开,请直接点击下载即可
文章版权归属weisim3.com所有,未经书面版权许可同意,不得私自转载(或做修改转载),源文件示例仅供学习使用,更不要出于商业用途或印刷出版发行!否则将追究其相关法律责任,版权联系QQ:729260499。
遺昕 | Weisim3.com 下载许可条款 ( 您必须接受同意才可下载 ) .