本主题演示了如何使用可缩放的向量图形 (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 测试图形。
注意 对于 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&