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

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属性，引用定义好的滤镜即可。filter标记必须定义在defs标记内，需要定义id名称来标识滤镜，定义滤镜的语法格式如下： defs filter id=filter_id !--滤镜定义-- /filter /defs 在图形或容器上引用滤镜的语法格式如下： g id=group_id style=filter:url(#filterid);/ !--绘制图形-- /g 7.6 滤镜 2．滤镜的应用 （1） 高斯模糊滤镜 feGaussianBlur滤镜的定义格式如下。 feGaussianBlur in=in_value stdDeviation=value/ 示例7-12定义了高斯模糊的滤镜效果 7.6 滤镜 2．滤镜的应用 （1） 高斯模糊滤镜 示例7-13实现的是利用高斯模糊滤镜 7.6 滤镜 2．滤镜的应用 （2） 位移滤镜 位移滤镜主要是让图形产生位置变化，使用feOffset标记进行定义，语法格式如下。 feOffset in=in_value dx=value dy=value/ 示例7-14中的投影效果 作业 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.1 SVG概述 (2)引用外部SVG文件 也可以通过img、embed、iframe等元素，在HTML中引用外部SVG文件。在HTML中调用外部SVG文件的语法格式如下: img src=filename.