第7章 HTML5的SVG绘图HTML5与CSS3 Web前端开发技术-PPT课件

1、HTML5+CSS3 Web 前端开发技术前端开发技术第7章 HTML5的SVG绘图(HTML5与CSS3 Web前端开发技术)HTML5+CSS3 Web 前端开发技术前端开发技术HTML5+CSS3 Web 前端开发技术前端开发技术HTML5+CSS3 Web 前端开发技术前端开发技术HTML5+CSS3 Web 前端开发技术前端开发技术7.1 SVG概述2 SVG调用方式调用方式(1) 嵌入嵌入svg元素元素 直接在直接在HTML页面中嵌入页面中嵌入svg元素。元素。svg元素包括开始元素包括开始标记标记和结束标记和结束标记，使用，使用width和和height属性设置属性设置svg元素

2、的宽度和高度。语法格式如下。元素的宽度和高度。语法格式如下。 HTML5+CSS3 Web 前端开发技术前端开发技术7.1 SVG概述(2)引用外部引用外部SVG文件文件 也可以通过也可以通过img、embed、iframe等元素，在等元素，在HTML中引用外部中引用外部SVG文件。文件。在在HTML中调用外部中调用外部SVG文文件的语法格式如下件的语法格式如下:HTML5+CSS3 Web 前端开发技术前端开发技术7.1 SVG概述(2)引用外部引用外部SVG文件文件例如例如7-1第一局部是一个第一局部是一个SVG文件文件HTML5+CSS3 Web 前端开发技术前端开发技术7.2 绘制绘制

3、SVG根本图形根本图形1绘制矩形和直线绘制矩形和直线(1)绘制矩形绘制矩形rect元素用来创立矩形及其各种变化。元素用来创立矩形及其各种变化。HTML5+CSS3 Web 前端开发技术前端开发技术7.2 绘制绘制SVG根本图形根本图形(2)绘制直线绘制直线 line元素用来创立直线，这个直线实际是线段元素用来创立直线，这个直线实际是线段线条，需要定义起点和终点，语法格式如下。线条，需要定义起点和终点，语法格式如下。HTML5+CSS3 Web 前端开发技术前端开发技术7.2 绘制绘制SVG根本图形根本图形2绘制圆和椭圆绘制圆和椭圆(1) 绘制圆形绘制圆形 circle元素可用来创立一个圆元素可

4、用来创立一个圆. 其中，其中，r为圆的半径，为圆的半径，cx、cy是圆心的横坐标是圆心的横坐标和纵坐标，和纵坐标，style用于定义圆的样式。用于定义圆的样式。HTML5+CSS3 Web 前端开发技术前端开发技术7.2 绘制绘制SVG根本图形根本图形(2)绘制椭圆绘制椭圆ellipse元素可用来创立椭圆，绘制椭圆的语法格元素可用来创立椭圆，绘制椭圆的语法格式如下：式如下：椭圆与圆属性的不同之处在于横轴半径椭圆与圆属性的不同之处在于横轴半径rx和纵轴半和纵轴半径径ry，而圆形只有半径，而圆形只有半径r。HTML5+CSS3 Web 前端开发技术前端开发技术7.2 绘制绘制SVG根本图形根本图形

5、3绘制折线和多边形绘制折线和多边形(1)绘制折线绘制折线 polyline元素可创立仅包含直线的形状元素可创立仅包含直线的形状. 折线主要定义每条线段的端点即可，所以只需要折线主要定义每条线段的端点即可，所以只需要一个点的集合一个点的集合points作为参数。作为参数。points是一系列是一系列用空格，逗号，换行符等分隔开的点。用空格，逗号，换行符等分隔开的点。HTML5+CSS3 Web 前端开发技术前端开发技术绘制SVG根本图形(2)绘制多边形绘制多边形polygon元素用来创立含有不少于三个边的图形。元素用来创立含有不少于三个边的图形。HTML5+CSS3 Web 前端开发技术前端开发

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

7、,x y画笔从当前的点绘制一段三次贝塞尔曲线到点(x,y)Ssmooth curvetox2 y2,x y特殊版本的三次贝塞尔曲线(省略第一个控制点)Qquadratic Belzier curvex1 y1,x y绘制二次贝塞尔曲线到点(x,y)Tsmooth quadratic Belzierx y特殊版本的二次贝塞尔曲线(省略控制点)Zclosepath无参数绘制闭合图形，如果d属性不指定Z命令，则绘制线段，而不是封闭图形。表表7-2 path元素的命令和绘制参数元素的命令和绘制参数HTML5+CSS3 Web 前端开发技术前端开发技术7.2 绘制绘制SVG根本图形根本图形5绘制文本和图

8、形绘制文本和图形(1)SVG绘制文本绘制文本SVG中，使用中，使用text元素输出文本元素输出文本.HTML5+CSS3 Web 前端开发技术前端开发技术7.2 绘制绘制SVG根本图形根本图形5绘制文本和图形绘制文本和图形(2)SVG显示图形显示图形SVG使用使用image元素显示外部图片，其语法格式元素显示外部图片，其语法格式如下：如下：例如例如7-2分别使用不同的标签，绘制了多个图形分别使用不同的标签，绘制了多个图形HTML5+CSS3 Web 前端开发技术前端开发技术绘制SVG根本图形5SVG绘图的属性绘图的属性(1)fill属性属性该属性用于设置图形内部的填充颜色，直接将颜色值赋给这该

9、属性用于设置图形内部的填充颜色，直接将颜色值赋给这个属性即可。例如，个属性即可。例如， fill= yellow;(2)stroke属性属性该属性用于设置绘制图形的边框颜色，也是直接为其赋颜色该属性用于设置绘制图形的边框颜色，也是直接为其赋颜色值即可。例如，值即可。例如， stroke= #f00;HTML5+CSS3 Web 前端开发技术前端开发技术7.2 绘制绘制SVG根本图形根本图形5SVG绘图的属性绘图的属性(3)stroke-width属性属性该属性用于定义图形边框的宽度，默认为该属性用于定义图形边框的宽度，默认为1像素，数值越大，边框越粗像素，数值越大，边框越粗。例如，。例如，st

10、roke-width=rgb(100%,50%,50%);(4)stroke-linecap属性属性该属性定义了线段端点的风格，即线帽的形状。该属性定义了线段端点的风格，即线帽的形状。(5) stroke-linejoin属性属性该属性定义了线段连接处的风格。该属性定义了线段连接处的风格。(6) stroke-dasharray属性属性stroke-dasharray属性用于绘制虚实线，其格式如下。属性用于绘制虚实线，其格式如下。stroke-dasharray=value,value,HTML5+CSS3 Web 前端开发技术前端开发技术7.2 绘制绘制SVG根本图形根本图形5SVG绘图的属

11、性绘图的属性HTML5+CSS3 Web 前端开发技术前端开发技术7.3 变换1平移平移 使用使用translate方法，可以移动坐标轴原点。方法，可以移动坐标轴原点。 transform= translate(,);2旋转旋转 使用使用rotate方法，可以定义目标对象绕某点旋方法，可以定义目标对象绕某点旋转一定的角度。该方法定义格式如下。转一定的角度。该方法定义格式如下。transform=rotate(,);HTML5+CSS3 Web 前端开发技术前端开发技术7.3 变换3缩放缩放使用使用scale方法，可以对图形元素的尺寸进行缩放方法，可以对图形元素的尺寸进行缩放。 transfor

12、m=scale(,);4倾斜倾斜使用一个或多个倾斜方法使用一个或多个倾斜方法skewX和和skewY，可以，可以对对SVG元素进行倾斜定义。元素进行倾斜定义。 transform=skewX(); transform=skewY();HTML5+CSS3 Web 前端开发技术前端开发技术7.3 变换例如例如7-4，首先定义了，首先定义了1个矩形，然后对其进行了个矩形，然后对其进行了3次图形变换。次图形变换。HTML5+CSS3 Web 前端开发技术前端开发技术7.4 组合与重用1g元素元素 g元素是一种把相关元素进行组合的容器元素。元素是一种把相关元素进行组合的容器元素。在在和和标记之间定义一

13、组图形元素，这标记之间定义一组图形元素，这些图形就成为一个整体，既可以使文档结构清晰，些图形就成为一个整体，既可以使文档结构清晰，又方便用户对组合元素进行操作。又方便用户对组合元素进行操作。例如例如7-5使用使用g元素定义了元素定义了3个图形组合个图形组合HTML5+CSS3 Web 前端开发技术前端开发技术7.4 组合与重用2use元素元素 SVG使用使用use元素，为定义在元素，为定义在g元素内的组合或元素内的组合或者任意独立图形元素提供类似复制粘贴的功能。者任意独立图形元素提供类似复制粘贴的功能。要实现如图要实现如图7-6所示效果，只要将下面所示效果，只要将下面3行代码写行代码写在上一小

14、节例如代码的在上一小节例如代码的SVG结束标记结束标记之之前即可。前即可。HTML5+CSS3 Web 前端开发技术前端开发技术7.4 组合与重用3defs元素元素通过在起始和结束通过在起始和结束标记之间放置这些组合标记之间放置这些组合对象，定义将来使用的内容，这时只定义但并不显对象，定义将来使用的内容，这时只定义但并不显示它们。需要的时候，使用示它们。需要的时候，使用use元素将元素将defs元素定元素定义的内容链接到需要的地方。通过这两个元素，可义的内容链接到需要的地方。通过这两个元素，可以屡次重用同一内容，消除冗余。以屡次重用同一内容，消除冗余。例如例如7-6使用使用defs元素和元素和

15、g元素定义了元素定义了house、man、woman三个图形组合三个图形组合HTML5+CSS3 Web 前端开发技术前端开发技术7.5 渐变与透明度1渐变渐变1线性渐变线性渐变线性渐变就是一系列颜色沿着一条直线过渡。例如线性渐变就是一系列颜色沿着一条直线过渡。例如7-7定义了定义了3种线性渐变效果。种线性渐变效果。HTML5+CSS3 Web 前端开发技术前端开发技术7.5 渐变与透明度1渐变渐变1线性渐变线性渐变例如例如7-8定义了线性渐变定义了线性渐变Grad1，颜色由黑黄红组，颜色由黑黄红组成。成。HTML5+CSS3 Web 前端开发技术前端开发技术7.5 渐变与透明度1渐变渐变2径

16、向渐变径向渐变径向渐变的每个渐变点表示一个圆形路径，从中心径向渐变的每个渐变点表示一个圆形路径，从中心点向外扩散。定义径向渐变的语法格式如下：点向外扩散。定义径向渐变的语法格式如下：例如例如7-9演示了径向渐变演示了径向渐变HTML5+CSS3 Web 前端开发技术前端开发技术7.5 渐变与透明度1渐变渐变2径向渐变径向渐变例如例如7-10定义了三种径向渐变颜色延展的效果定义了三种径向渐变颜色延展的效果HTML5+CSS3 Web 前端开发技术前端开发技术7.5 渐变与透明度2透明度透明度 SVG使用使用opacity属性定义整个元素的透明度，属性定义整个元素的透明度，使用使用fill-opa

17、city属性为填充属性为填充fill属性设置透明属性设置透明度，使用度，使用stroke-opacity属性为边框属性为边框stroke属性设置透明度，这些透明度取值范围都是属性设置透明度，这些透明度取值范围都是0到到1之间。之间。例如例如7-11中绘制了透明度效果。中绘制了透明度效果。HTML5+CSS3 Web 前端开发技术前端开发技术7.6 滤镜1滤镜的定义滤镜的定义 SVG的滤镜效果使用的滤镜效果使用filter元素定义，在需要滤镜效果的图形或容器元素定义，在需要滤镜效果的图形或容器上添加上添加filter:url属性，引用定义好的滤镜即可。属性，引用定义好的滤镜即可。标记必须定标记必须定义在义在标记内，需要定义标记内，需要定义id名称来标识滤镜，定义滤镜的语法格名称来标识滤镜，定义滤镜的语法格式如下：式如下： 在图形或容器上引用滤镜的语法格式如下：在图形或容器上引用滤镜的语法格式如下： HTML5+CSS3 Web 前端开发技术前端开发技术7.6 滤镜2滤镜的应用滤镜的应用1 高斯模糊滤镜高斯模糊滤镜feGaussianBlur滤镜的定义格式如下。滤镜的定义格式如下。例如例如7-12定义了高