svg 教程

admin — Thu, 23 Apr 2009 06:04:11 +0000

本教程适用于那些希望使用可伸缩向量图形（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 代码都遵循相同的基本模式：

每个房间的代码都包含在嵌套的 svg 元素中，x 属性和 y 属性确定了该嵌套 svg 元素的位置。

现在回忆一下，该图像宽 1200 像素，但视区的宽只有 400 像素。下面我将使图像在视区中居中。

使图像居中

请注意，最初创建 101 室时指出它应该出现在视区的左上角处：

照原样不变，这意味着在装入页面时，101 室填入视区，但与此相反的是，我希望 102 室填入视区。为此，我要创建一个容器，然后把所有房间都向左移动 400 个像素：

g 元素充当容器，所以任何指令（如 translate() 转换）都会应用于容器内的任何元素。最终结果是该转换把所有三个房间都向左移动 400 个像素，从而使中间的房间显示在视区中。

添加链接

现在图像上唯一缺少的是从一楼的每个房间到二楼楼层平面图的链接：



    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





onload="Initialize()" bgcolor="#EEEEFF">





   

        XMML Room Design
        Scarman Building

        





   Current room to edit is: 
               


   
       onclick="goLeft=true; panDoc()" 
              value="<<   Scroll Left" />
   
   
       onclick="toExec()"
               value="Make Executive Office" />
   
   
       onclick="toStandard()"
               value="Make Standard Office" />
   
   
       onclick="goRight=true; panDoc()" 
               value="Scroll Right   >>" />
   


   
      onclick="zoomIn()"
               value="Zoom In" />
   
   
      onclick="increaseHeight()"
               value="Increase Height" />
   
   
      onclick="decreaseHeight()"
               value="Decrease Height" />
   
   
      onclick="zoomOut()"
               value="Zoom Out" />

使用非正式、但却非常有用的 embed 元素嵌入 SVG 图像。embed 元素目前是将 SVG 图像嵌入到 HTML Web 页面的最常用元素，因为在正式的 object 元素的浏览器实现中存在许多局限性。请注意，embed 元素的 type 属性指定了要嵌入的图像的类型为 image/svg+xml，这样浏览器就知道要对它做什么。

该文档有一个包含一些控件的简单表，用户可以使用这些控件进行向左和向右滚动、将房间的特征从“standard（标准）”房间更改成 “executive（行政）”房间然后再更改回 standard、更改活动房间的高度（即实际的深度）以及进行放大和缩小。请注意，每个 button 都有一个 onclick 属性，它指定了在用户单击各个控件时会发生的行为。在查看楼层平面图中您将会了解这些处理程序背后的实际脚本。

该文档还有一个 span 元素，它告知用户当前哪个房间是活动的。编制脚本确定了元素的内容。

查看文档

在支持 SVG 的浏览器中打开这个 HTML 文档最初会显示中间那间房间：

此时，浏览器发出出错信号，因为 Initialize() 函数还没有就位，但这不是问题。但是，如果没有看到这个房间，那么需要回头检查一下 SVG 查看器的安装。

视区至此，您已创建了一个图像，它比位于这个图像上面的窗口要大。用户可以清晰地看到 102 室，而 101 室在视区左侧，无法看到，103 室在视区右侧，也无法看到。您可以通过以下三种方法中的任一种看见它们：

移动图像：要看到其它两个房间，可以使用 transform 属性移动图像，就象我们对最初的 SVG 图像所做的那样。这样做会使得图像在表示视区的打开的窗口下方移动。但这不是最有效的方法。
移动视区：不移动图像，而只是移动视区，使您希望查看的那部分图像位于视区中，这非常类似于在电话簿的某一页上移动放大镜。因为视区的实际边界由浏览器固定在某一位置，所以在用户看来似乎图像本身在移动，但实际上是视区相对于图像在移动。
缩放图像：除了移动图像外，也可以使图像变大或变小，以确定通过视区仍可以看到的图片区域，而视区的大小保持不变。

本章中，我将向您展示如何移动视区以看到图像的各个部分，以及如何缩放图像以查看更多或更少部分。
全局变量和初始化

您可以在浏览器装入页面时先声明全局变量和调用 Initialize() 函数：



XMML Room Design






onload="Initialize()" bgcolor="#EEEEFF">




...htmlObj 变量稍后用于对访问 SVG 图像的 embed 元素的引用。SVGDoc 变量表示 SVG 图像的根节点，即主 svg 元素。SVGRoot 变量用于表示 SVG 图像的 document 元素。viewBox 变量用于保存 svg 元素中 document 元素的 viewBox 属性值。
svgns 变量表示 SVG 名称空间的名称空间 URI，稍后在创建新元素和属性时会在脚本中用到它。
htmlObj 变量使用 HTML 文档的 getElementById() 方法将 embed 元素 －
id="RoomsHere" width="400px"
        height="250px" type="image/svg+xml" src="Rooms.svg">
－ 标识为要分配给它的值。
接着，getSVGDocument() 方法使 SVG 文档的根节点与 SVGDoc 变量相关联。对 SVGDoc 变量的引用就是对包含在 embed 元素中的 SVG 图像根节点的引用。这样您就创建了一种方法，从而将 HTML 文档中的事件与表示 HTML 文档内显示的部分 SVG 图像的变量相关联。
最后，该脚本使 SVGRoot 变量与 SVG 图像的文档元素相关联。
在开始滚动图像时，您将需要所有这些信息。
获取当前位置
panDoc() 函数控制向左和向右滚动：
...
   SVGRoot = SVGDoc.documentElement;

} // end function Initialize()

function panDoc(evt){

   viewBox = SVGRoot.getAttribute('viewBox');
   var viewVals = viewBox.split(' ');
   currentPosition = parseFloat(viewVals[0]);

} // end function panDoc()


...
首先，该脚本向 viewBox 变量赋予 svg 文档元素的 viewBox 属性值。回忆一下，SVGRoot 元素表示图像的主 svg 元素，所以 getAttribute() 方法工作时就象它对任何其它 XML 文档操作一样，即检索 viewBox 属性的字符串值。
这里的难点在于 viewBox 实际上是一组用空格分隔的值，您只想要这组值中的第一个值，所以该脚本通过使用 ECMAScript split() 函数抽取出值 0 0 400 250 的各部分，从而创建了数组变量 viewVals。
然后 parseFloat() 方法转换字符串值 0，以便可以将它作为数字值 0 使用。
一旦您获得了当前位置，就可以更改它。
移动视区
接着，确定视区应该向左移还是向右移，并相应地调整 currentPosition：
...
function panDoc(evt){

   viewBox = SVGRoot.getAttribute('viewBox');
   var viewVals = viewBox.split(' ');
   currentPosition = parseFloat(viewVals[0]);

   if (goLeft == true){
      if (currentPosition > -400) {
          currentPosition = currentPosition - 200;
      }
      goLeft = false;
   }

   if (goRight == true){
     if (currentPosition < 400) {
          currentPosition = currentPosition + 200;
     }
     goRight = false;
   }

   viewVals[0] = currentPosition;
   SVGRoot.setAttribute('viewBox', viewVals.join(' '));

} // end function panDoc()
...
如果 goLeft 为 true，那么 panDoc() 将 currentPosition 的值减去 200（如果该值大于 -400）。这防止了 SVG 图像进一步向左滚动超出 101 室的左边界。然后将值 false 赋给 goLeft 变量。
同样，如果准备向右移动，那么脚本将当前位置增加 200 个像素。
现在请回忆一下，您正在移动的是视区，所以当前位置的新值必须返回给 viewBox 属性。一旦该新值已被添加回数组，join() 函数就把 viewBox 变量已更改的值重新组合在一起。然后使用 setAttribute() 方法将该值赋给 svg 元素的 viewBox 属性。
其结果是，SVG 图像仿佛沿着所期望的方向滚动 200 个像素。例如，要完全显示 101 室，用户需要在 Scroll Left 文本控件上单击两次。
激活滚动
当用户单击控件时，浏览器就执行 onclick 属性中包含的任何 ECMAScript 代码。在 Scroll Left 和 Scroll Right 按钮这两种情况中，onclick 属性指定应该向全局变量赋值 true，而且应该调用 panDoc() 函数：
...

...（还可以通过以下这种方法在 Adobe SVG 查看器中移动图像：按住 ALT 键，再按下鼠标左键，然后移动鼠标，但是出于本教程的目的，您需要直接控制视区移动到哪里以及移动多少。）
您也可以通过使图像本身变大或变小来更改通过视区所看到的图像部分。
放大和缩小
这些控件还提供了放大和缩小图像的方法。当用户单击 Zoom In 按钮时，浏览器执行 zoomIn() 函数。 当用户单击 Zoom Out 按钮时，浏览器执行 zoomOut() 函数：
...
   SVGRoot.setAttribute('viewBox', viewVals.join(' '));

} // end function panDoc()

function zoomIn(){

   if (SVGRoot.currentScale < 5){
      SVGRoot.currentScale = SVGRoot.currentScale * 1.5;
   }

} // end function zoomIn

function zoomOut(){

   if (SVGRoot.currentScale > 0.3){
      SVGRoot.currentScale = SVGRoot.currentScale * 0.67;
   }

} // end function zoomOut


...
zoomIn() 函数很简单。在 Initialize() 函数中已经将 SVG 图像的 svg 文档元素赋予了 SVGRoot 变量，当首次装入 SVG 图像时，SVGRoot 变量的 currentScale 特性值是 1.0。
每次用户单击 Zoom In 按钮时，该脚本将 currentScale 特性值乘以 1.5，但只有在该特性的当前值小于 5 时才这样做。这样做的效果是放大 SVG 图像，或者说，如果您喜欢，就是放大该图像的各个部分。
zoomOut() 函数与 zoomIn() 的工作方式相同，只不过其作用是缩小图像。
缩放和平移操作
理解更改某个特性会对其它特性产生影响，这一 点很重要。例如，每个“滚动”操作都会让图像朝某个方向或其相反方向移动 200 个像素，所以很自然地，人们会设想，如果该图像已被缩小到常规大小的一半，那么通过一次单击操作就可以滚过宽度为 400 像素的整个房间，但事实并非如此。当比例发生变动后，会影响所有尺寸，正如您在这个图像中可以看到的：
 
既然可以控制要看到图像的哪部分，那么我将向您展示如何更改图像本身。
更改房间

本教程的目的是创建 SVG 楼层平面图，用户可以操纵它进行一些更改以更好地满足他或她的需要。例如，住宅构建器（home builder）可能支持用户将卧室替换成书房，或者将浴室替换成杂物间。用户也许还能拉长或缩小房间。
在本教程中，您将了解所有这些概念，我们支持用户将房间类型从 Executive Office 更改成 Standard Office，然后再改回到 Executive Office，并使房间变大或变小。要对图像作这些更改，您要改变、添加以及除去一些对象，这些对象属于 SVG 图像的文档对象模型（DOM）。
首先，您需要确定要更改 SVG 图像中三个房间的哪一个。
确定当前房间
为了明确地确定要更改哪个房间，在用户单击 Make Executive Office 或 Make Standard Office 按钮时，必须确定用户当时可以看到哪个房间。为此，您要对页面添加 setCurrentRoom() 函数：
...
} // end function Initialize()

function setCurrentRoom(){

   viewBox = SVGRoot.getAttribute('viewBox');
   var viewVals = viewBox.split(' ');
   currentPosition = parseFloat(viewVals[0]);

   if (currentPosition % 400 != 0) {
      currentRoomId = null;
      currentRoomLabel = "None.  Please scroll to desired room.";
   } else if (currentPosition / 400 == 0) {
      currentRoomId = "Room102";
      currentRoomLabel = "Room 102";
   } else if (currentPosition / 400 == -1) {
      currentRoomId = "Room101";
      currentRoomLabel = "Room 101";
   } else if (currentPosition / 400 == 1) {
      currentRoomId = "Room103";
      currentRoomLabel = "Room 103";
   }

}

function panDoc(evt){
...
这项技术与在获取当前位置中所用的技术一样，但是现在，您正使用该信息确定当前哪个房间与视区的左边界对齐。如果没有一个房间与它对齐（正如视区离初始位置不是 400 个像素的整数倍这种情况），那么就不存在当前房间，脚本就会相应地设置 currentRoomId 值。在其它情况中，请注意 currentRoomId 值与 SVG 文档内相关 id 值的前缀相匹配（正如房间中所看到的）。稍后在开始操纵文档时，将使用该信息。
但是除非您在适当的时间执行该函数，否则它对您没有任何好处。


 


























   
       onclick="goLeft=true; panDoc()" 
           value="<<   Scroll Left" />
   
   
       
   
   
       
   
   
       onclick="goRight=true; panDoc()" 
           value="Scroll Right   >>" />

Current room to edit is:
onclick="goLeft=true; panDoc()" value="<< Scroll Left" />	onclick="toExec()" value="Make Executive Office" />	onclick="toStandard()" value="Make Standard Office" />	onclick="goRight=true; panDoc()" value="Scroll Right >>" />
onclick="zoomIn()" value="Zoom In" />	onclick="increaseHeight()" value="Increase Height" />	onclick="decreaseHeight()" value="Decrease Height" />	onclick="zoomOut()" value="Zoom Out" />

Power by Result Search » svg

svg 教程

XMML Room Design

Scarman Building