svg缩放移动、移动轨迹追溯_如何使用 SVG 进行缩放和平移

展开全部

该教程介绍了用于配置报表服务器、管理报表服务器内容和操作以及创建与发布报表和报表模型的工具。本教e69da5e6ba9062616964757a686964616f31333337373662程旨在于帮助新用户了解如何查找和打开各个工具。如果您已经熟悉了这些工具，您可以转到其他教程学习有关使用 Reporting Services 的重要技能。有关其他教程的详细信息，请参阅如何查找教程 (Reporting Services)。

简介

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

创建 SVG 测试图

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

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

testGraphic.html 的屏幕快照

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

注意 对于 Internet Explorer 9，若要查看该示例的标记，请右键单击呈现的页面并单击“查看源”。

来自 HTML5 内联 SVG 测试图形示例的以下(不完整)代码段举例说明了如何创建之前的图形。

style="fill: none; stroke-width: 2px;"/>

This text is going to get extremely small.

The red center dot is to the left.

The red center dot is to the right.

在 HTML5 内联 SVG 测试图形示例中，这个组合的 SVG 图形 () 减小了尺寸并且多次重复使用以通过多次调用 use 元素创建之前显示的测试图形。例如：

use 元素创建了引用元素的副本(以及该元素中包含的所有子元素)。

另请注意，SVG text-anchor: middle 样式可轻松将文本居中显示，而 writing-mode: tb 可按垂直方式显示文本。

与最新的 CSS 转换一样，SVG 始终支持相同的概念，包括转换、缩放和旋转。要围绕某个中心点按给定因子缩放图形，可以使用以下伪代码：

transform="translate( -centerX*(factor-1), -centerY*(factor-1) ) scale(factor)"

在此伪代码中，(centerX, centerY) 表示中心点的 (x, y) 坐标，而 factor 是所需的比例因子。

在此示例中，SVG 视区为 800 x 600 像素，视区的中心位于 (400,