在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标签,然后在标签里面进行绘制。下面是呈现矩形和圆形椭圆效果。
< 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代码。
< 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>中预先定义。下面是详细代码示例展示。
< 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>为自由变换如图形旋转、缩放主要用此属性,下面是动画鼠标事件详细代码。
<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=="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="freez
< 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编写工具中将会集成这一可视化编辑功能。