第7章 HTML5的SVG绘图(HTML5与CSS3 Web前端开发技术 知识).pptVIP

HTML5+CSS3 Web 前端开发技术 LOGO HTML5+CSS3 Web 前端开发技术 第7章 HTML5的SVG绘图 SVG概述 1 绘制SVG基本图形 2 变换 3 组合与重用 4 渐变与透明度 5 滤镜 6 7.1 SVG概述 1．SVG优缺点 (1)SVG绘图优点 图形文件可以使用任何文本编辑器创建，可读性强并易于修改和编辑。 与现有技术可以互动融合。另外，可通过JS脚本来控制SVG对象。 SVG图形格式可以方便地建立文字索引，实现基于内容的图像搜索。 SVG图形可在任何分辨率下被高质量地打印。 SVG图形格式支持多种滤镜和特殊效果，在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果。 SVG图形格式可以用来动态生成图形。例如，可以SVG动态生成具有交互功能的地图，嵌入网页中，并显示在客户端。 7.1 SVG概述 SVG并不是绝对优势的图形格式，只在某些领域具有很高的使用价值，它存在以下缺点。 (2) SVG绘图缺点 使用广泛性不如Flash。 SVG本地运行环境下的厂家支持程度有待提高。 由于原始的SVG文件是遵从XML语法，导致数据采用压缩的方式存放，因此相较于其他的矢量图形格式，同样的文件内容会比其他的文件格式稍大。 旧版的SVG Viewer无法正确显示出使用新版SVG格式的矢量图形。 7.1 SVG概述 (3)SVG绘图与canvas绘图的区别 canvas SVG canvas通过JavaScript来绘制2D图形 SVG是使用XML描述2D图形的语言 canvas是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括已被图形覆盖的对象。 在SVG中，每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。 依赖分辨率 不依赖分辨率 不支持事件处理 支持事件处理 弱的文本渲染能力 最适合带有大型渲染区域的应用程序（比如谷歌地图） 能够以 .png 或 .jpg 格式保存结果图像 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） 最适合图像密集型的游戏，其中的许多对象会被频繁重绘 不适合游戏应用 表7-1 canvas和SVG的不同点对照表 7.1 SVG概述 2． SVG调用方式 (1) 嵌入svg元素 直接在HTML页面中嵌入svg元素。svg元素包括开始标记svg和结束标记/svg，使用width和height属性设置svg元素的宽度和高度。语法格式如下。 svg width= height= !--绘制图形代码-- /svg 7.2 绘制SVG基本图形 1．绘制矩形和直线 (1)绘制矩形 rect元素用来创建矩形及其各种变化。 rect x= y= rx= ry= width= height= style= / 7.2 绘制SVG基本图形 (2)绘制直线 line元素用来创建直线，这个直线实际是线段（线条），需要定义起点和终点，语法格式如下。 line x1= y1= x2= y2= style=/ 7.2 绘制SVG基本图形 2．绘制圆和椭圆 (1) 绘制圆形 circle元素可用来创建一个圆. circle cx= cy= r= style=/ 其中，r为圆的半径，cx、cy是圆心的横坐标和纵坐标，style用于定义圆的样式。 7.2 绘制SVG基本图形 (2)绘制椭圆 ellipse元素可用来创建椭圆，绘制椭圆的语法格式如下： ellipse cx= cy= rx= ry= style=/ 椭圆与圆属性的不同之处在于横轴半径rx和纵轴半径ry，而圆形只有半径r。 7.2 绘制SVG基本图形 3．绘制折线和多边形 (1)绘制折线 polyline元素可创建仅包含直线的形状. polyline points= style= 折线主要定义每条线段的端点即可，所以只需要一个点的集合points作为参数。points是一系列用空格，逗号，换行符等分隔开的点。 7.2绘制SVG基本图形 (2)绘制多边形 polygon元素用来创建含有不少于三个边的图形。 polygon points= style= 7.2 绘制SVG基本图形 4．绘制路径 path元素用来定义路径。 命令 含义 参数 说明 M moveto x,y 将画笔移动到点(x,y) L lineto x,y 画笔从当前的点绘制线段到点(x,y) H horizontal lineto x 从当前的点绘制水平线段到点(x,y0) V vertical lineto y 从当前的点绘制竖直线段到点