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

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