如何使用 SVG 进行缩放和平移

本主题演示了如何使用可缩放的向量图形 (SVG) 进行缩放和平移，并在结尾处提供了一个可进行缩放和平移的复杂组织结构图示例。假定你掌握了基本的 HTML 和 JavaScript 知识，并能访问可在 HTML5 中呈现内联 SVG 的浏览器（如 Windows Internet Explorer 9）。

• 简介
• 创建 SVG 测试图
• 基于浏览器的 SVG 缩放和平移
• 基于 JavaScript 的 SVG 缩放和平移
  • JavaScript 缩放
  • JavaScript 平移
  • 组织到一起
• 创建复杂的 SVG 组织结构图
  • 使用 Excel 创建组织结构图列表
  • 使用 Visio 2010 创建组织结构图
• 在网页中显示独立的 SVG 文件。
• 摘要
• 相关主题

简介

在本主题中，我们首先讨论的是如何使用详细的 SVG 测试图在 SVG 中进行缩放和平移。然后，我们将描述如何使用 Microsoft Excel 和 Microsoft Visio 2010 创建复杂的 SVG 组织 (org) 结构图，该图可由支持 SVG 的浏览器显示。

创建 SVG 测试图

SVG 的一个主要功能是可“无限”放大详图。为了突出显示此功能，我们需要创建一个适合进行缩放和平移的足够详细的 SVG 测试图。在用户放大该图的某个特定功能并希望通过滚动浏览该功能的临近区域时，平移就会变得很重要。

适合进行缩放和平移的可接受的 SVG 测试图可能与下图类似。

此图形是使用以下示例创建的：HTML5 内联 SVG 测试图形。

注意 对于 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&