在HTML5中包括了两种绘图方式,canvas和svg(矢量呈现),而与canvas不同的是,svg是一种XML标记语言,它既可以单独保存以“.svg”为后缀的文件在浏览器中打开显示,也支持建立svg标签直接嵌入在网页中显示,还可以通过
svg的形状shapes:rect/矩形(方形) 、circle/圆形、ellipse/椭圆、line/线、polyline/多边交叉线和polygone/多边形可以使用,当然还有image;
其中,(1)在rect中有如下属性:x/y(矩形左上角坐标),width/height(矩形宽高),rx/ry(矩形的角弧度;最大值为宽高的一半,而且当矩形为正方形切最大值时图形为圆形),fill(图形填充色),stroke/stroke-width(图形边框/边框宽度;默认为1px);(2)在circle中则有如下属性:cx/cy(圆形圆点坐标)、r(圆形半径)、fill、stroke/stroke-width;(3)在ellipse中则有如下属性:cx/cy、rx/ry(椭圆X轴/Y轴的半径)、fill、stroke/stroke-width;(4)在line中则有如下属性:stroke/stroke-width(线的颜色/宽度)、x1/y1(直线起点坐标)、x2/y2(直线终点坐标);(5)在polyline中则有如下属性:stroke/stroke-width(线的颜色/宽度)、points(x1,y1 x2,y2 x3,y3)(起点终点以及各个转折点的坐标);(6)在polygon中有如下属性stroke/stroke-width(线的颜色/宽度)、points(x1,y1 x2,y2 x3,y3)(起点终点以及各个转折角的坐标);
代码如下:
然后,svg在图形上还有一种按照路径来画图形的标签path,其实path标签是用来定义路径的,标签里有个d="";的属性,里面的值为路径坐标;以下命令可用于路径数据:M = moveto,L = lineto,H = horizontal lineto,V = vertical lineto,C = curveto,S = smooth curveto,Q = quadratic Belzier curve,T = smooth quadratic Belzier curveto,A = elliptical Arc,Z = closepath;(这些命令均允许大小写,大写表示绝对定位,小写表示相对定位);例如:
另外,svg对于文字也有不同的效果体现,svg的text标签支持渐变填充,也支持文字拾取曲线排列文字,需要预先定义渐变填充在中,当文字拾取路径排列是也需要在中预先定义。而text也有自己的一些属性:x/y(X轴/Y轴起始点坐标)、dx/dy(X轴/Y轴偏移位置的坐标)、rotate(旋转偏移的角度)、textLength(元素的长度,会影响输出的宽度)、transform(文字的变形效果,类似css中的transform);代码如下:
svg可以直接支持动画和鼠标触发事件,也支持JavaScript脚本响应时间,接下来会为大家介绍一下svg的鼠标事件和动画;click事件,在SVG中触发click事件,attributeName是类型这里fill是指填充,to="red"是点击之后填充为红色,attributeName支持visibility、opacity、width等属性。动画,这里动画from="0,260"为平面坐标点,x轴为0,y轴为260;to="180,100"则是动画移动到"180,100"位置;dur="5s"为帧速。动画为自由变换如图形旋转、缩放主要用此属性;代码如下: