面向浏览器的动态 SVG

开始之前

关于本教程

SVG 是一种定位于 Web 领域中多种应用的技术。可用于表示简单的图像（如 JPEG）和复杂的应用（如 Macromedia Flash）。2006 年较早的一期教程中介绍了这种格式的基本特性（请参阅 参考资料）。本教程继续讨论 SVG 在 Web 开发中的应用，举例说明了如何实现动态效果，为改进网页设计提供了一种新方法。课程是围绕着例子进行的，您可以在您喜欢的浏览器中查看和试验。

SVG 是 W3C 开发的，主要目标是提供一种实用、灵活的 XML 图像格式，尽管 XML 语言有点罗嗦。它可以在多种不同的环境中开发、处理和部署，从手机和 PDA 这样的移动系统到印刷环境。SVG 的主要特点包括嵌套转换、剪辑路径、alpha 蒙版、光栅过滤效果、模板对象，当然还有可扩展性。SVG 还支持动画、视图的缩放和移动、各种图像原语、分组、脚本、超链接、结构化元数据、CSS、专门的 DOM 超集，并且很容易嵌入其他 XML 文档。其中很多特性可以实现图像的动态效果。总之，SVG 是应用最广、最受欢迎的 XML 应用程序之一。

动态 SVG 是一个热门话题，已经有一些教程和文章提供了相当复杂的动态 SVG 技术的例子。本教程的独特之处是使用非常简单的例子说明应用的广度而不是深度。您可以将在本教程学到的多种技术结合起来实现非常复杂的效果，但是本教程中的每个例子都非常简单、清楚、独立。本教程很少谈到比圆形更复杂的 SVG 对象，并尽量减少对脚本和 XML 的修饰。从简单的例子开始一步一步开发再加上对实际的浏览器环境的关注是本教程的主要特色。

回页首

谁应该阅读本教程？

SVG 是每一位 Web 开发人员和设计师必备的重要利器。只要是开发 Web 应用程序的程序员都应该阅读本教程。Web 设计师应该利用本教程学习如何在 Web 上有效部署向量图像。

回页首

目标

本教程讨论的内容包括脚本、CSS 和 SVG 的基本动画特性，用于在 Web 向量图像中实现动态效果。您将了解到各种基本技术，使用 SVG 将其结合起来可以创建富有吸引力的、复杂的 Web 环境。

回页首

前提条件

本教程假设您了解 XML、XML 名称空间、CSS、XHTML、SVG 基础和 ECMAScript 基础（您可能更熟悉 JavaScript 这个名字）以及文档对象模型（DOM）。如果不熟悉 SVG 的基础知识，包括 XML、XML 名称空间或 CSS，或者需要了解 ECMAScript 和 DOM，参考资料 中的链接可提供相关帮助信息。

回页首

系统需求

本教程中的例子只需要支持 SVG 并启用了 ECMAScript 支持的 Web 浏览器。Firefox 1.5 及更新版本和 Opera 9 内置了这方面的支持。Safari 宣布在最新版本中支持 SVG，但是目前只能在其加紧开发的预览版中看到这种支持，不能保证稳定性。Mac OS X 用户可以试试 Camino Web 浏览器 的 SVG 支持。Internet Explorer 用户需要安装 Adobe SVG Viewer 之类的插件。本教程中的浏览器输出截屏图使用 Firefox 1.5.0.4、Ubuntu Linux 制作。Firefox 是一种流行的 Web 浏览器，支持 Windows、Mac OS X、Linux 和其他平台，它基于 Mozilla 的呈现引擎。

回页首

关于本教程中的例子

本教程中包含很多 SVG 文件的例子，既有独立的也有嵌入到 XHTML 中的。本教程中用到的所有文件都打包成一个 zip 文件，即 tutorial-files.zip（请参阅 下载）。这个压缩包中的所有文件都用前缀说明相关的节次以及该例子在这一节中的顺序。比如，第三节第一个例子的文件名以 “eg_3_1” 开始。

后缀名为 .svg 的文件是独立的 SVG。以 .xhtml 结束的则是 XHTML。少数文件使用其他扩展名，如 .css 表示独立的 CSS 文件，.xsl 表示 XSLT 转换文件。

每一屏都列出了例子文件并说明了相互之间的关系。如果按顺序阅读本教程，很容易找到相关的文件并进行试验。

1 页，共 8 | 后一页

评论

回页首

内容

• 开始之前
• 处理 CSS
• 更多的 ECMAScript 操纵
• SVG 动画
• 结束语
• 下载
• 参考资料
• 关于作者

---

1 页，共 8 | 后一页