logo资料库

经典SVG教程.pdf

发布时间：2022-05-29 发布人：admin 分类：说明书 资料大小：0.42M 资料格式：pdf 举报 版权申诉
第1页 / 共41页
第2页 / 共41页
第3页 / 共41页
第4页 / 共41页
第5页 / 共41页
第6页 / 共41页
第7页 / 共41页
第8页 / 共41页
资料共41页，剩余部分请下载后查看
    svg 教程 2007 年 10 月 10 日 星期三 10:19 本教程适用于那些希望使用可伸缩向量图形（SVG） 创建交互式 SVG 图形并使用 XSLT 从 XML 文件产生这样的 SVG 图像的开发人员。它讨论了 ECMAScript （JavaScript）的用 法，ECMAScript 支持用户在不必重新装入浏览器页面的情况下与现有的 SVG 图像进行实时 交互并对其进行更改。本教程还演示了 SVG 元素上的链接。 本教程是关于什么的？ SVG 是一个功能强大的可视化工具，它非常适合于显示以 XML 格式保存的数据。本教程 演示了如何用 SVG 显示一个简化的交互式楼层平面图。在本教程中，JavaScript 在 SVG 图 像中提供了交互性，它支持 Web 页面的访问者缩放图像、在房间之间滚动以及执行其它功能。 本教程包括： • 创建最初的 SVG 图像 • 缩放图像 • 使用 JavaScript 将图像从一个房间滚动到另一个房间 • 删除 SVG 元素 • 添加新的 SVG 元素 • 从 SVG 元素链接到其它文档 • 使用 XSLT 动态地生成 SVG 文档 工具 本教程向您展示了如何构建 HTML 、SVG 和 XSLT 文档。要学习本教程，您需要一个文本编 辑器、一个 SVG 查看器和一个 XSLT 引擎： • 纯文本编辑器是创建 SVG 文件所需的唯一工具。虽然支持 XML 的文本编辑器可以检 查所编写文件是否具有良好的格式和／或文件的有效性，这对于检测编码错误非常有 用，但在本教程中并不是必需的。 • SVG 查看器：在编写本文时，使用最广泛的 SVG 查看器是 Adobe 的 SVG Viewer V3.0，可以从 http://www.adobe.com/svg/viewer/install/main.html 免费获得 该查看器。参考资料中列出了其它一些 SVG 查看器。 • 浏览器：Adobe 查看器可以和 Microsoft Internet Explorer 5.x 及更高版本一起很 好地工作，也可以和 Netscape Navigator 4.x 及更高版本一起很好地工作。但 Adobe SVG Viewer V3 不能和 Mozilla 1.0 及更高版本一起可靠地工作，尤其当存 在脚本编制的代码时。 • XSLT 处理器：本示例使用 Saxon XSLT 处理器。可以从 http://saxon.sourceforge.net/ 下载该处理器。 关于作者
    Andrew Watt 是一位有志于研究 XML 技术并在这方面拥有专门技术的独立顾问。他编写 了世界上第一本有关 SVG 的书 Designing SVG Web Graphics（New Riders 出版），他 是 SVG Unleashed （Sams Publishing 出版）的主要作者，而且还编写了几本有关 XML 和 Web 技术方面的书。他有两个完全讨论 SVG 的网站：http://www.xmml.com/ 和 http://www.edititwrite.com/，这两个网站演示了如何使用 SVG 创建一些有用的站点。可 以通过 SVGDeveloper@aol.com 与 Andrew 联系。 目标 本教程集中讨论了创建一个简单的楼层平面图， 用户可以访问该楼层平面图来确定计划建 造的办公大楼房间的类型和大小。本教程首先讨论一个 HTML 文档，其中包含的 SVG 图像表 示大楼某一楼层经过简化的楼层平面图。SVG 图像包括三个房间 － 101 室、102 室和 103 室 － 其中，在首次装入该 HTML 文档时，只能看到 102 室。要看到完整的楼层平面图，用 户可以进行缩放以确定总体比例。该 HTML 文档还提供了一些控件，它们支持用户在一楼的三 个房间之间进行滚动。还有一些控件允许用户更改所选房间的特征 － 本例中，将 Standard Office 更改成 Executive Office 并改回到 Standard Office。最后，用户能放大或缩小指定 房间的大小。 一楼的每个房间还包含到同一幢大楼的二楼平面图的链接，二楼平面图具有相同的功能并具 有到一楼的链接。 楼层平面图的功能使用 ECMAScript（JavaScript）代码来提供交互性。该代码演示了使用 HTML 页面上的 ECMAScript 来控制该页面中 SVG 图像元素的一些方面。 本教程最后一部分讨论了使用 XSLT 代码将源 XML 文档转换成一楼楼层平面图的 SVG 图像。 下面我将向您展示这个简单应用程序所包含的组件。 应用程序的各组成部分 整个应用程序包含以下几部分： • XML 源文档：该文档定义了 SVG 图像最初的一些特征。 它可以是静态的 XML 文 件（就如这里将显示的），或者就是从数据库轻松生成的 XML 。 • XSLT 样式表：使用 XSLT 转换可以轻松地完成 XML 文档（比方说，可能是楼层平 面图的 XML 文档）到那些平面图的 SVG 图像的动态转换。该应用程序还可以使用不 同的样式表生成不同的显示。 • SVG 图像：这是最终将生成的图像，它提供了用户将看到的画面。它本身是 XML 文 档，可以使用 XML 编程技术（如文档对象模型（Document Object Model，DOM）） 来操纵它。 • HTML 容器文档：要直接在浏览器中显示 SVG 图像，通常需要在一个 HTML 页面
    中嵌入该图像。 本例中，HTML 文档还包含操纵该 SVG 图像的 Javascript 代码。 我首先讨论 SVG 文档本身。 SVG 文档结构 本教程使用了两个 SVG 图像 － 一个表示办公大楼的一楼部分，而第二个 SVG 图像表示 二楼对应的房间。每个 SVG 图像都嵌套在 HTML 页面中。我先手工创建一楼的图像，这样我 才有可以处理的对象。 SVG 图像以 svg 根元素开始： 请注意，名称空间的声明指定了这些 SVG 元素位于 SVG 名称空间内，编写这些元素时无 需带任何名称空间的前缀。 整个 SVG 图像宽 1200 像素，高 250 像素，视区宽 400 像素，高 250 像素，如 viewBox 属性所示。viewBox 属性的第一和第二个值指出视区左上角位于 (0,0) 。viewBox 属性的第三和第四个值指出视区的右下角位于 (400,250) 。用户无法看到图像在该视区以外的 任何部分。每个房间宽 400 像素，高 250 像素，所以刚开始时该视区只能容纳一个房间。 再次声明，视区只是 SVG 图像中可见的那一部分。在本教程的后面，我将使用 ECMAScript 操纵 viewBox 属性的内容，使得可以向左或向右滚动 SVG 图像。 三个房间中的每一间开始时宽 400 像素，高 250 像素，代表房间宽 40 英尺，深 25 英 尺。接下来，我将向您展示如何添加这些房间 房间 因为这是有关 SVG 的教程，而不是有关内部装饰的教程，所以我就把每个房间表示成大小适 当的矩形。 一楼三个房间（101 室、102 室和 103 室）中每一间的 SVG 代码都遵循相同的基本模式：
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> Room 101 Standard office ... ... 每个房间的代码都包含在嵌套的 svg 元素中，x 属性和 y 属性确定了该嵌套 svg 元素的位 置。 现在回忆一下，该图像宽 1200 像素，但视区的宽只有 400 像素。下面我将使图像在视区中 居中。 使图像居中 请注意，最初创建 101 室时指出它应该出现在视区的左上角处： 照原样不变，这意味着在装入页面时，101 室填入视区，但与此相反的是，我希望 102 室填 入视区。为此，我要创建一个容器，然后把所有房间都向左移动 400 个像素：
    width="1200px" height="250px" viewBox="0 0 400 250" id="RoomsSVG"> Room 101 Standard office Room 102 Standard office Room 103 Standard office g 元素充当容器，所以任何指令（如 translate() 转换）都会应用于容器内的任何元素。最 终结果是该转换把所有三个房间都向左移动 400 个像素，从而使中间的房间显示在视区中。 添加链接 现在图像上唯一缺少的是从一楼的每个房间到二楼楼层平面图的链接：
    Room 101 Standard office Click to view 2nd Floor ... SVG 中的链接类似于 HTML 中的链接，因为它也使用了 a 标记和 href 属性。但 SVG 实际上还是引用了以前推荐的 XLink ，所以该文档必须声明 xlink 名称空间，并将它用于 href 属性。否则，该链接就会象一般的 HTML 链接那样工作，如同将 SVG 图像嵌入 HTML 页面时您会看到的那样。 HTML 容器文档 在这个应用程序中，通过使用 embed 元素将 SVG 文件嵌入到 HTML 文档 Rooms.html 中。HTML 容器文档中的大部分由 ECMAScript 组成，本教程稍后将详细描 述它，但目前我们在此只讨论基本框架： XMML Room Design

    XMML Room Design

    Scarman Building
    Current room to edit is:
    value="Increase Height" />
    使用非正式、但却非常有用的 embed 元素嵌入 SVG 图像。embed 元素目前是将 SVG 图 像嵌入到 HTML Web 页面的最常用元素，因为在正式的 object 元素的浏览器实现中存在许 多局限性。请注意，embed 元素的 type 属性指定了要嵌入的图像的类型为 image/svg+xml，这样浏览器就知道要对它做什么。 该文档有一个包含一些控件的简单表，用户可以使用这些控件进行向左和向右滚动、将房间 的特征从“standard（标准）”房间更改成 “executive（行政）”房间然后再更改回 standard 、 更改活动房间的高度（即实际的深度）以及进行放大和缩小。请注意，每个 button 都有一个 onclick 属性，它指定了在用户单击各个控件时会发生的行为。 在查看楼层平面图中您将会 了解这些处理程序背后的实际脚本。 该文档还有一个 span 元素，它告知用户当前哪个房间是活动的。编制脚本确定了元素的内容。 查看文档 在支持 SVG 的浏览器中打开这个 HTML 文档最初会显示中间那间房间：
    分享到：
    赞 收藏

    相关推荐

    资料库

    开发技术

    共收录19306份资料，累计14个分类，关注成员有19位，主要包括：Actionscript,Javascript,PHP,VB,Perl,Delphi,Python,C#,C,Java,C++,Web开发,硬件开发,其它

    热门标签

    Actionscript Javascript PHP VB Perl Delphi Python C# C Java C++ Web开发 硬件开发 其它

    最新资料