|
本主题演示了如何使用可缩放的向量图形 (SVG) 进行缩放和平移，并在结尾处提供了一个可进行缩放和平移的复杂组织结构图示例。假定你掌握了基本的 HTML 和 JavaScript 知识，并能访问可在 HTML5 中呈现内联 SVG 的浏览器（如 Windows Internet Explorer 9）。
简介在本主题中，我们首先讨论的是如何使用详细的 SVG 测试图在 SVG 中进行缩放和平移。然后，我们将介绍如何使用 Microsoft Excel 和 Microsoft Visio 2010 创建复杂的 SVG 组织 (org) 结构图，该图可在支持 SVG 的浏览器中显示。 创建 SVG 测试图SVG 的一个主要功能是可“无限”放大详图。为了突出显示此功能，我们需要创建一个适合进行缩放和平移的足够详细的 SVG 测试图。在用户放大该图的某个特定功能并希望通过滚动浏览该功能的临近区域时，平移就会变得很重要。 适合进行缩放和平移的可接受的 SVG 测试图可能与下图类似。  此图形是使用以下示例创建的：HTML5 内联 SVG 测试图形。 Note 对于 Internet Explorer 9，若要查看该示例的标记，请右键单击呈现的页面并单击“查看源”。 来自 HTML5 内联 SVG 测试图形示例的以下（不完整）代码段举例说明了如何创建之前的图形。 <!-- Define an SVG graphic which will be reduced in size and reused multiple times. --> <g id="parentGraphic" style="stroke: blue; fill: blue;"> <rect x="5%" y="5%" width="90%" height="90%" rx="10" ry="10" style="fill: none; stroke-width: 2px;"/> <text x="50%" y="97.2%" style="text-anchor: middle;"> This text is going to get extremely small. </text> <text x="95.4%" y="50%" style="writing-mode: tb; text-anchor: middle;"> The <tspan style="stroke: red;">red</tspan> center dot is to the left. </text> <text x="3.3%" y="50%" style="writing-mode: tb; text-anchor: middle;"> The <tspan style="stroke: red; fill: red;">red</tspan> center dot is to the right. </text> </g> 在 HTML5 内联 SVG 测试图形示例中，这个组合的 SVG 图形 (
另请注意，SVG 与最新的 CSS 转换一样，SVG 始终支持相同的概念，包括转换、缩放和旋转。要围绕某个中心点按给定因子缩放图形，可以使用以下伪代码：
在此伪代码中，( 在此示例中，SVG 视区为 800 x 600 像素，视区的中心位于 (400, 300)。要将
这将简化为下面的非伪代码：
然后，可将其直接应用于
此技术用于减少和集中其余 10 个版本的 现在，我们将使用这个测试图形来演示如何采用两种方法在 SVG 中进行缩放和平移：基于浏览器和基于脚本。 基于浏览器的 SVG 缩放和平移对 SVG 图进行缩放和平移的最简单方法是使用浏览器自带的缩放和滚动功能。下表描述了 Internet Explorer 9 中有关缩放的鼠标和键盘快捷方式。
使用浏览器的滚动条可在缩放图中轻松进行平移。 基于 JavaScript 的 SVG 缩放和平移由于针对缩放和/或平移的用户界面可能随浏览器的不同而不同（或出于其他原因），因此实现你自己的基于 JavaScript 的缩放和平移功能很有用。下面提供了针对这两种情况的示例。 JavaScript 缩放该示例使用两个按钮和鼠标滚轮啦放大和缩小测试图像：当前比例 SVG 缩放。 尽管通过注释很好地记录了此示例，但仍需注意以下几点：
JavaScript 平移在放大某个特定 SVG 图后，能够移动（平移）图形以查看各种放大功能会很有用。以下示例使用箭头键来平移一个简单的 SVG 图像（蓝色圆圈）：SVG 平移。 在此示例中，平移（和下一个示例中的缩放）是通过操作
Note ULCx 和 ULCy 分别表示“左上角 x”和“左上角 y”。UUwidth 和 UUheight 分别表示“用户单位宽度”和“用户单位高度”。 通常，会相对于此用户空间/在此用户空间（即用户坐标系统）内绘制 SVG 图形对象。对于利用相对静态图形进行缩放和平移，SVG 图形对象通常决不会在其用户坐标系统内移动；相反，将在 SVG 视区内/相对于 SVG 视区移动用户坐标系统（及其所有“已附带”图形）。因此，从视区的角度来看，已移动图形对象。换言之，通常你可以移动或转换“已附带”图形对象的用户坐标系统，而非图形对象本身。 牢记上述内容，可按如下方式解释 4 个数字（ULCx、ULCy、UUwidth 和 UUheight）：
组织到一起此示例中使用 请记住，与以编程方式修改 创建复杂的 SVG 组织结构图可将 Excel（或其他应用程序）与 Visio 2010 配合使用来创建复杂而详细的 SVG 组织 (org) 结构图，然后支持 SVG 的浏览器可显示该图。我们会将此过程分为多个组成部分来对其进行描述：
使用 Excel 创建组织结构图列表组织结构图列表的格式很简单。例如，在下面的电子表格段中，虚拟公司的每个员工都列出了其姓名、其上级以及图中要显示的其他有用信息。
Note 不需要 Excel 创建组织结构图列表。可使用其他应用程序（包括简单文本文件）定义组织的层次结构。例如，以下链接提供 CSV 版本的 Excel 文件：100 个员工组织结构图列表（CSV 格式）。 有关详细信息，请参阅 Visio 2010 帮助文档的“创建组织结构图”主题中的“使用现有数据源自动创建组织结构图”部分。 创建组织结构图列表后，可将其导入 Visio 2010 中，如下一部分中所述。 使用 Visio 2010 创建组织结构图导入组织结构图列表相对来说比较简单。在 Visio 2010 中，完成以下步骤：
Note 如果你希望自己的组织结构图位于一个 Visio 2010 页面上，请在使用该向导时选择“指定每页显示的组织结构内容”。 有关详细信息，请参阅 Visio 2010 帮助文档的“创建组织结构图”主题中的“使用现有数据源自动创建组织结构图”部分。 完成该向导后，根据需要调整生成的 Visio 2010 组织结构图布局（可能减小字体），然后通过“另存为”对话框以可伸缩向量图形 (*.svg) 格式保存组织结构图。现在，支持的 Web 浏览器中可显示此 SVG 文件，如下一部分中所述。 在网页中显示独立的 SVG 文件。诸如 Visio 2010 或 InkScape 之类的应用程序在生成独立的 SVG 文件之后，你可以采用多种方式在支持的浏览器中显示此 SVG 文件。 显示独立的 SVG 文件的一种最简单的方法是，在支持独立 SVG 的浏览器中打开该文件。例如，单击以下链接可打开以独立 SVG 格式保存的 100 名员工 Visio 2010 组织结构图（如前所述）：orgChart.svg 然后，可以按根据需要使用该浏览器自带的缩放和滚动（平移）功能来浏览此 SVG 图。可以在 Internet Explorer 9 中进行缩放操作，如上表所述。只需移动滚动条（如果存在）即可实现平移。 创建独立的 SVG 文件后，可通过多种方法将该文件嵌入现有网页或新网页中。例如，可使用 <!DOCTYPE html> <html> <head> <title>100 Employee SVG Org Chart</title> <meta http-equiv="X-UA-Compatible" content="IE=9"/> <!-- For intranet rendering only, remove when page is placed in production! --> </head> <body> <h1>Embedding SVG in a HTML Document</h1> <p>Embedding the file <em>orgChart.svg</em> using the <strong>object</strong> element:</p> <object data="orgChart.svg" width="800px" height="600px" type="image/svg+xml"> <img src="orgChart.png" alt="PNG Image of 100 Employee SVG Org Chart" /> </object> </body> </html> 请注意，如果用户的浏览器不支持 SVG，则显示 SVG 组织结构图的 PNG 图像文件。 以下链接扩展了此 HTML SVG Org Chart with Zoom & Pan 示例使用前面所述的技术。但是，一个唯一差别是脚本必须访问单独文件 orgChart.svg 中包含的 var theSvgDocument = document.getElementById('objectElement').getSVGDocument();
theSvgElement = theSvgDocument.documentElement;
换句话说，可通过本地 摘要SVG 的向量特性决定了它完全适应需要高度详细的信息的图形，如复杂的组织结构图、体系结构图、地图及其他类似媒体。本主题将帮助你使用 SVG 的核心功能之一（即可缩放的向量图形）。 Related topics
Build date: 8/13/2013 |
|
|
来自： greenyun588 > 《待分类1》
