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

1、第第7章章 HTML5的SVG绘图SVG概述概述1绘制绘制SVG基本图形基本图形2变换变换3组合与重用组合与重用4渐变与透明度渐变与透明度5滤镜滤镜67.1 SVG概述1SVG优缺点优缺点(1)SVG绘图优点绘图优点v图形文件可使用任何文本编辑器创建，可读性强图形文件可使用任何文本编辑器创建，可读性强，易于修改易于修改。v与现有技术可以互动融合与现有技术可以互动融合，可通过可通过JS脚本来控制脚本来控制SVG对象。对象。vSVG图形格式方便建立文字索引，实现基于内容的图像搜索。图形格式方便建立文字索引，实现基于内容的图像搜索。vSVG图形可被高质量地打印。图形可被高质量地打印。vSVG图形格式

2、支持多种滤镜和特殊效果，在不改变图像内容的图形格式支持多种滤镜和特殊效果，在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果。前提下可以实现位图格式中类似文字阴影的效果。vSVG图形格式可以用来动态生成图形。例如，可以图形格式可以用来动态生成图形。例如，可以SVG动态生动态生成具有交互功能的地图，嵌入网页中，并显示在客户端。成具有交互功能的地图，嵌入网页中，并显示在客户端。7.1 SVG概述SVG只在某些领域具有很高的使用价值，它存在缺点。只在某些领域具有很高的使用价值，它存在缺点。(2)SVG绘图缺点绘图缺点v使用广泛性不如使用广泛性不如Flash。vSVG本地运行环境下的厂家支持

3、程度有待提高。本地运行环境下的厂家支持程度有待提高。v由于原始的由于原始的SVG文件是遵从文件是遵从XML语法，导致数据采用压缩的方语法，导致数据采用压缩的方式存放，因此相较于其他的矢量图形格式，同样的文件内容会比式存放，因此相较于其他的矢量图形格式，同样的文件内容会比其他的文件格式稍大。其他的文件格式稍大。v旧版的旧版的SVG Viewer无法正确显示出使用新版无法正确显示出使用新版SVG格式的矢量格式的矢量图形。图形。7.1 SVG概述(3)SVG绘图与绘图与canvas绘图的区别绘图的区别canvasSVGcanvas通过JS来绘制2D图形SVG是使用XML描述2D图形的语言c a nv

4、a s 是 逐 像 素 进 行 渲 染 的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括已被图形覆盖的对象。在SVG中，每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。依赖分辨率不依赖分辨率不支持事件处理支持事件处理弱的文本渲染能力最适合带有大型渲染区域的应用程序（比如谷歌地图）能够以.png 或.jpg 格式保存结果图像 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）最适合图像密集型的游戏，其中的许多对象会被频繁重绘不适合游戏应用表表7-1 canvas和和S

5、VG的不同点对照表的不同点对照表7.1 SVG概述2 SVG调用方式调用方式(1)嵌入嵌入svg元素元素 直接在直接在HTML页面中嵌入页面中嵌入svg元素。元素。svg元素包括开始元素包括开始标记标记和结束标记和结束标记，使用，使用width和和height属性设置属性设置svg元素的宽度和高度。元素的宽度和高度。7.1 SVG概述(2)引用外部引用外部SVG文件文件 也可以通过img、embed、iframe等元素，在HTML中引用外部SVG文件。在HTML中调用外部SVG文件的语法格式如下:7.1 SVG概述(2)引用外部引用外部SVG文件文件示例示例7-1第一部分是一个第一部分是一个S

6、VG文件文件7.2 绘制SVG基本图形1绘制矩形和直线绘制矩形和直线(1)绘制矩形绘制矩形rect元素用来创建矩形及其各种变化。7.2 绘制SVG基本图形(2)绘制直线绘制直线 line元素用来创建直线，这个直线实际是线段（线条）元素用来创建直线，这个直线实际是线段（线条），需要定义起点和终点，语法格式如下。，需要定义起点和终点，语法格式如下。7.2 绘制SVG基本图形2绘制圆和椭圆绘制圆和椭圆(1)绘制圆形绘制圆形 circle元素可用来创建一个圆元素可用来创建一个圆.其中，其中，r为圆的半径，为圆的半径，cx、cy是圆心的横坐标和纵坐是圆心的横坐标和纵坐标，标，style用于定义圆的样式。

7、用于定义圆的样式。7.2 绘制SVG基本图形(2)绘制椭圆绘制椭圆ellipse元素可用来创建椭圆，绘制椭圆的语法格式如下：元素可用来创建椭圆，绘制椭圆的语法格式如下：椭圆与圆属性的不同之处在于横轴半径椭圆与圆属性的不同之处在于横轴半径rx和纵轴半径和纵轴半径ry，而圆形只有半径而圆形只有半径r。7.2 绘制SVG基本图形3绘制折线和多边形绘制折线和多边形(1)绘制折线绘制折线 polyline元素可创建仅包含直线的形状元素可创建仅包含直线的形状.折线主要定义每条线段的端点即可，所以只需要一个点折线主要定义每条线段的端点即可，所以只需要一个点的集合的集合points作为参数。作为参数。poin

8、ts是一系列用空格，逗号，是一系列用空格，逗号，换行符等分隔开的点。换行符等分隔开的点。7.2绘制SVG基本图形(2)绘制多边形绘制多边形polygon元素用来创建含有不少于三个边的图形。元素用来创建含有不少于三个边的图形。7.2 绘制SVG基本图形4绘制路径绘制路径 path元素用来定义路径,命令和参数如下。命令命令含义含义参数参数说明说明Mmovetox,y将画笔移动到点(x,y)Llinetox,y画笔从当前的点绘制线段到点(x,y)Hhorizontal linetox从当前的点绘制水平线段到点(x,y0)Vvertical linetoy从当前的点绘制竖直线段到点(x0,y)Aell

9、iptical Arcrx,ry x-axis-rotation large-arc-flag sweep-flag x y画笔从当前的点绘制一段圆弧到点(x,y)Ccurvetox1,y1,x2 y2,x y画笔从当前的点绘制一段三次贝塞尔曲线到点(x,y)Ssmooth curvetox2 y2,x y特殊版本的三次贝塞尔曲线(省略第一个控制点)Qquadratic Belzier curvex1 y1,x y绘制二次贝塞尔曲线到点(x,y)Tsmooth quadratic Belzierx y特殊版本的二次贝塞尔曲线(省略控制点)Zclosepath无参数绘制闭合图形，如果d属性不指定

10、Z命令，则绘制线段，而不是封闭图形。7.2 绘制SVG基本图形5绘制文本和图形绘制文本和图形(1)SVG绘制文本绘制文本SVG中，使用text元素输出文本.7.2 绘制SVG基本图形5绘制文本和图形绘制文本和图形(2)SVG显示图形显示图形SVG使用使用image元素显示外部图片，其语法格式如下：元素显示外部图片，其语法格式如下：示例示例7-2分别使用不同的标签，绘制了多个图形分别使用不同的标签，绘制了多个图形7.2绘制SVG基本图形5SVG绘图的属性绘图的属性(1)fill属性属性用于设置图形内部的填充颜色，直接将颜色值赋给该属性即用于设置图形内部的填充颜色，直接将颜色值赋给该属性即可。例如

11、，可。例如，fill=yellow;(2)stroke属性属性用于设置绘制图形的边框颜色，直接为其赋颜色值即可。例用于设置绘制图形的边框颜色，直接为其赋颜色值即可。例如，如，stroke=#f00;7.2 绘制SVG基本图形5SVG绘图的属性绘图的属性(3)stroke-width属性属性用于定义图形边框的宽度，默认用于定义图形边框的宽度，默认1像素，数值越大，边框越粗。例如，像素，数值越大，边框越粗。例如，stroke-width=rgb(100%,50%,50%);(4)stroke-linecap属性属性定义线段端点的风格，即线帽的形状。定义线段端点的风格，即线帽的形状。(5)strok

12、e-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缩放缩放使用s

13、cale方法，可以缩放图形元素的尺寸。transform=scale(,);4倾斜倾斜使用一个或多个倾斜方法skewX和skewY，可以对SVG元素进行倾斜定义。transform=skewX();transform=skewY();7.3 变换示例示例7-4，首先定义了，首先定义了1个矩形，然后对其进行了个矩形，然后对其进行了3次图形变换。次图形变换。7.4 组合与重用1g元素元素 g元素是一种把相关元素进行组合的容器元素。在元素是一种把相关元素进行组合的容器元素。在和和标记之间定义一组图形元素，这些图形就成为一个标记之间定义一组图形元素，这些图形就成为一个整体，既可以使文档结构清晰，又方便

14、用户对组合元素进行整体，既可以使文档结构清晰，又方便用户对组合元素进行操作。操作。示例示例7-5使用使用g元素定义了元素定义了3个图形组合个图形组合7.4 组合与重用2use元素元素SVG使用use元素，为定义在g元素内的组合或者任意独立图形元素提供类似复制粘贴的功能。要实现如图要实现如图7-6所示效果，只要将下面所示效果，只要将下面3行代码写在上一小节示例代码行代码写在上一小节示例代码的的SVG结束标记结束标记之前即可。之前即可。7.4 组合与重用3defs元素元素通过在起始和结束通过在起始和结束标记之间放置这些组合对象，定义将来使用标记之间放置这些组合对象，定义将来使用的内容，这时只定义但

15、并不显示它们。需要的时候，使用的内容，这时只定义但并不显示它们。需要的时候，使用use元素将元素将defs元素定义的内容链接到需要的地方。通过这两个元素，可以多次重元素定义的内容链接到需要的地方。通过这两个元素，可以多次重用同一内容，消除冗余。用同一内容，消除冗余。示例示例7-6使用使用defs元素和元素和g元素定义了元素定义了house、man、woman三个图形组合三个图形组合7.5 渐变与透明度1渐变渐变（1）线性渐变线性渐变线性渐变就是一系列颜色沿着一条直线过渡。线性渐变就是一系列颜色沿着一条直线过渡。示例示例7-7定义了定义了3种线性种线性渐变效果。渐变效果。7.5 渐变与透明度1渐

16、变渐变（1）线性渐变线性渐变示例示例7-8定义了线性渐变定义了线性渐变Grad1，颜色由黑黄红组成，颜色由黑黄红组成。7.5 渐变与透明度1渐变渐变（2）径向渐变径向渐变径向渐变的每个渐变点表示一个圆形路径，从中心点向外扩散。径向渐变的每个渐变点表示一个圆形路径，从中心点向外扩散。定义径定义径向渐变的语法格式如下：向渐变的语法格式如下：示例示例7-9演示了演示了径向渐变径向渐变7.5 渐变与透明度1渐变渐变（2）径向渐变径向渐变示例示例7-10定义了三种径向渐变颜色延展的效果定义了三种径向渐变颜色延展的效果7.5 渐变与透明度2透明度透明度 SVG使用使用opacity属性定义整个元素的透明度

17、，使用属性定义整个元素的透明度，使用fill-opacity属属性为填充（性为填充（fill属性）设置透明度，使用属性）设置透明度，使用stroke-opacity属性为边框属性为边框（stroke属性）设置透明度，这些透明度取值范围都是属性）设置透明度，这些透明度取值范围都是0到到1之间。之间。示例示例7-11中绘制了中绘制了透明度效果。透明度效果。7.6 滤镜1滤镜的定义滤镜的定义 SVG的滤镜效果使用的滤镜效果使用filter元素定义，在需要滤镜效果的图形或容器元素定义，在需要滤镜效果的图形或容器上添加上添加filter:url属性，引用定义好的滤镜即可。属性，引用定义好的滤镜即可。标记

18、必须定标记必须定义在义在标记内，需要定义标记内，需要定义id名称来标识滤镜。名称来标识滤镜。在图形或容器上引用滤镜的语法格式如下：在图形或容器上引用滤镜的语法格式如下：7.6 滤镜2滤镜的应用滤镜的应用（1）高斯模糊滤镜高斯模糊滤镜feGaussianBlur滤镜的定义格式如下。滤镜的定义格式如下。示例示例7-12定义了高斯模糊的滤镜效果定义了高斯模糊的滤镜效果7.6 滤镜2滤镜的应用滤镜的应用（1）高斯模糊滤镜高斯模糊滤镜示例示例7-13实现的是利用高斯模糊滤镜实现的是利用高斯模糊滤镜7.6 滤镜2滤镜的应用滤镜的应用（2）位移滤镜位移滤镜位移滤镜主要是让图形产生位置变化，使用位移滤镜主要是让图形产生位置变化，使用标记进行定义标记进行定义，语法格式如下。，语法格式如下。示例示例7-14中的投影效果中的投影效果作业与操作（1）使用g、use、defs等元素，以及translate、scale等方法完成如图7-15所示的效果，其中3个房子图案分别填充不同的颜色，每种形状后2个图案的缩放比例分别为0.8和0.6。