HTML第7章-HTML5的SVG绘图课件

1、第7章 HTML5的SVG绘图SVG概述1绘制SVG基本图形2变换3组合与重用4渐变与透明度5滤镜67.1 SVG概述1SVG优缺点(1)SVG绘图优点图形文件可使用任何文本编辑器创建，可读性强，易于修改。与现有技术可以互动融合，可通过JS脚本来控制SVG对象。SVG图形格式方便建立文字索引，实现基于内容的图像搜索。SVG图形可被高质量地打印。SVG图形格式支持多种滤镜和特殊效果，在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果。SVG图形格式可以用来动态生成图形。例如，可以SVG动态生成具有交互功能的地图，嵌入网页中，并显示在客户端。7.1 SVG概述SVG只在某些领域具有很高的

2、使用价值，它存在缺点。(2) SVG绘图缺点使用广泛性不如Flash。SVG本地运行环境下的厂家支持程度有待提高。由于原始的SVG文件是遵从XML语法，导致数据采用压缩的方式存放，因此相较于其他的矢量图形格式，同样的文件内容会比其他的文件格式稍大。旧版的SVG Viewer无法正确显示出使用新版SVG格式的矢量图形。7.1 SVG概述(3)SVG绘图与canvas绘图的区别canvasSVGcanvas通过JS来绘制2D图形SVG是使用XML描述2D图形的语言canvas是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景

3、也需要重新绘制，包括已被图形覆盖的对象。在SVG中，每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。依赖分辨率不依赖分辨率不支持事件处理支持事件处理弱的文本渲染能力最适合带有大型渲染区域的应用程序（比如谷歌地图）能够以 .png 或 .jpg 格式保存结果图像复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）最适合图像密集型的游戏，其中的许多对象会被频繁重绘不适合游戏应用表7-1 canvas和SVG的不同点对照表7.1 SVG概述2 SVG调用方式(1) 嵌入svg元素 直接在HTML页面中嵌入svg元素。svg元素包括开始标记和结束标记，使

4、用width和height属性设置svg元素的宽度和高度。 7.1 SVG概述(2)引用外部SVG文件 也可以通过img、embed、iframe等元素，在HTML中引用外部SVG文件。在HTML中调用外部SVG文件的语法格式如下:7.1 SVG概述(2)引用外部SVG文件示例7-1第一部分是一个SVG文件7.2 绘制SVG基本图形1绘制矩形和直线(1)绘制矩形rect元素用来创建矩形及其各种变化。7.2 绘制SVG基本图形(2)绘制直线 line元素用来创建直线，这个直线实际是线段（线条），需要定义起点和终点，语法格式如下。7.2 绘制SVG基本图形2绘制圆和椭圆(1) 绘制圆形 circl

5、e元素可用来创建一个圆. 其中，r为圆的半径，cx、cy是圆心的横坐标和纵坐标，style用于定义圆的样式。7.2 绘制SVG基本图形(2)绘制椭圆ellipse元素可用来创建椭圆，绘制椭圆的语法格式如下：椭圆与圆属性的不同之处在于横轴半径rx和纵轴半径ry，而圆形只有半径r。7.2 绘制SVG基本图形3绘制折线和多边形(1)绘制折线 polyline元素可创建仅包含直线的形状. 折线主要定义每条线段的端点即可，所以只需要一个点的集合points作为参数。points是一系列用空格，逗号，换行符等分隔开的点。7.2绘制SVG基本图形(2)绘制多边形polygon元素用来创建含有不少于三个边的图

6、形。7.2 绘制SVG基本图形4绘制路径 path元素用来定义路径,命令和参数如下。命令含义参数说明Mmovetox,y将画笔移动到点(x,y)Llinetox,y画笔从当前的点绘制线段到点(x,y)Hhorizontal linetox从当前的点绘制水平线段到点(x,y0)Vvertical linetoy从当前的点绘制竖直线段到点(x0,y)Aelliptical Arcrx, ry x-axis-rotation large-arc-flag sweep-flag x y画笔从当前的点绘制一段圆弧到点(x,y)Ccurvetox1, y1,x2 y2,x y画笔从当前的点绘制一段三次贝塞

7、尔曲线到点(x,y)Ssmooth curvetox2 y2,x y特殊版本的三次贝塞尔曲线(省略第一个控制点)Qquadratic Belzier curvex1 y1,x y绘制二次贝塞尔曲线到点(x,y)Tsmooth quadratic Belzierx y特殊版本的二次贝塞尔曲线(省略控制点)Zclosepath无参数绘制闭合图形，如果d属性不指定Z命令，则绘制线段，而不是封闭图形。7.2 绘制SVG基本图形5绘制文本和图形(1)SVG绘制文本SVG中，使用text元素输出文本.7.2 绘制SVG基本图形5绘制文本和图形(2)SVG显示图形SVG使用image元素显示外部图片，其语法

8、格式如下：示例7-2分别使用不同的标签，绘制了多个图形7.2绘制SVG基本图形5SVG绘图的属性(1)fill属性用于设置图形内部的填充颜色，直接将颜色值赋给该属性即可。例如， fill= yellow;(2)stroke属性用于设置绘制图形的边框颜色，直接为其赋颜色值即可。例如， stroke= #f00;7.2 绘制SVG基本图形5SVG绘图的属性(3)stroke-width属性用于定义图形边框的宽度，默认1像素，数值越大，边框越粗。例如，stroke-width=rgb(100%,50%,50%);(4)stroke-linecap属性定义线段端点的风格，即线帽的形状。(5) stro

9、ke-linejoin属性该属性定义了线段连接处的风格。(6) stroke-dasharray属性stroke-dasharray属性用于绘制虚实线，其格式如下。stroke-dasharray=value,value,7.2 绘制SVG基本图形5SVG绘图的属性7.3 变换1平移 使用translate方法，可以移动坐标轴原点。 transform= translate(,);2旋转 使用rotate方法，可以定义目标对象绕某点旋转一定的角度。transform=rotate(,);7.3 变换3缩放使用scale方法，可以缩放图形元素的尺寸。 transform=scale(,);4倾斜

10、使用一个或多个倾斜方法skewX和skewY，可以对SVG元素进行倾斜定义。 transform=skewX(); transform=skewY();7.3 变换示例7-4，首先定义了1个矩形，然后对其进行了3次图形变换。7.4 组合与重用1g元素 g元素是一种把相关元素进行组合的容器元素。在和标记之间定义一组图形元素，这些图形就成为一个整体，既可以使文档结构清晰，又方便用户对组合元素进行操作。示例7-5使用g元素定义了3个图形组合7.4 组合与重用2use元素SVG使用use元素，为定义在g元素内的组合或者任意独立图形元素提供类似复制粘贴的功能。要实现如图7-6所示效果，只要将下面3行代码

11、写在上一小节示例代码的SVG结束标记之前即可。7.4 组合与重用3defs元素通过在起始和结束标记之间放置这些组合对象，定义将来使用的内容，这时只定义但并不显示它们。需要的时候，使用use元素将defs元素定义的内容链接到需要的地方。通过这两个元素，可以多次重用同一内容，消除冗余。示例7-6使用defs元素和g元素定义了house、man、woman三个图形组合7.5 渐变与透明度1渐变（1）线性渐变线性渐变就是一系列颜色沿着一条直线过渡。示例7-7定义了3种线性渐变效果。7.5 渐变与透明度1渐变（1）线性渐变示例7-8定义了线性渐变Grad1，颜色由黑黄红组成。7.5 渐变与透明度1渐变（

12、2）径向渐变径向渐变的每个渐变点表示一个圆形路径，从中心点向外扩散。定义径向渐变的语法格式如下：示例7-9演示了径向渐变7.5 渐变与透明度1渐变（2）径向渐变示例7-10定义了三种径向渐变颜色延展的效果7.5 渐变与透明度2透明度 SVG使用opacity属性定义整个元素的透明度，使用fill-opacity属性为填充（fill属性）设置透明度，使用stroke-opacity属性为边框（stroke属性）设置透明度，这些透明度取值范围都是0到1之间。示例7-11中绘制了透明度效果。7.6 滤镜1滤镜的定义 SVG的滤镜效果使用filter元素定义，在需要滤镜效果的图形或容器上添加filter:url属性，引用定义好的滤镜即可。标记必须定义在标记内，需要定义id名称来标识滤镜。 在图形或容器上引用滤镜的语法格式如下： 7.6 滤镜2滤镜的应用（1） 高斯模糊滤镜feGaussianBlur滤镜的定义格式如下。示例7-12定义了高斯模糊的滤镜效果7.6 滤镜2滤镜的应用