Question

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

Answer 1

<!-- 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 图形 (<g id="parentGraphic" ...>) 减小了尺寸并且多次重复使用以通过多次调用use 元素创建之前显示的测试图形。例如：

<use href="#parentGraphic" … />

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, 300)。要将 parentGraphic 缩小 10%（即比例因子为 0.9），可以使用（在伪代码中）：

transform="translate( -400*(0.9-1), -300*(0.9-1) ) scale(0.9)"

这将简化为下面的非伪代码：

transform="translate(40, 30) scale(0.9)"

然后，可将其直接应用于 use 元素来获得所需效果：

<use href="#parentGraphic" transform="translate(40, 30) scale(0.9)"/>

此技术用于减少和集中其余 10 个版本的 parentGraphic。

现在，我们将使用这个测试图形来演示如何采用两种方法在 SVG 中进行缩放和平移：基于浏览器和基于脚本。

基于浏览器的 SVG 缩放和平移

对 SVG 图进行缩放和平移的最简单方法是使用浏览器自带的缩放和滚动功能。在 Internet Explorer 9 中，下表描述了与缩放相关的鼠标和键盘快捷方式。

用户操作

键盘快捷键

鼠标快捷键

放大
Ctrl + 加号
Ctrl + <向前滚动滚轮>

缩小
Ctrl + 减号
Ctrl + <向后滚动滚轮>

返回默认缩放级别
Ctrl + 0
不适用

使用浏览器的滚动条可在缩放图中轻松进行平移。

基于 JavaScript 的 SVG 缩放和平移

由于针对缩放和/或平移的用户界面可能随浏览器的不同而不同（或出于其他原因），因此实现你自己的基于 JavaScript 的缩放和平移功能很有用。下面提供了针对这两种情况的示例。

JavaScript 缩放

该示例使用两个按钮和鼠标滚轮啦放大和缩小测试图像：当前比例 SVG 缩放。

尽管通过注释很好地记录了此示例，但仍需注意以下几点：

用于调整测试图大小（或缩放级别）的技术是 svg 元素的 currentScale 特性。
mousewheel 事件已与 window 元素挂接（与 svg 或 body 元素相对），这样一来，无论缩放级别如何，鼠标滚轮在整个网页上都是活动的。
需要 svg 元素的 viewBox 属性以避免与缩放有关的呈现问题（在没有 viewBox 属性的情况下进行尝试即可观察该问题）。

JavaScript 平移

在放大某个特定 SVG 图后，能够移动（平移）图形以查看各种放大功能会很有用。以下示例使用箭头键来平移一个简单的 SVG 图像（蓝色圆圈）：SVG 平移。

在此示例中，平移（和下一个示例中的缩放）是通过操作 svg 元素的 viewBox 特性的值来实现的。viewBox 属性的值（一个包含四个数字的字符串）在用户空间中指定了一个矩形，该矩形将映射到视区边界（由svg 元素建立）。通过使用有助于教学的非标准词汇，可按如下方式描述
viewBox 语法：

viewBox="ULCx ULCy UUwidth UUheight"

注意 ULCx 和 ULCy 分别表示“左上角 x”和“左上角 y”。UUwidth 和UUheight 分别表示“用户单位宽度”和“用户单位高度”。

通常，会相对于此用户空间/在此用户空间（即用户坐标系统）内绘制 SVG 图形对象。对于利用相对静态图形进行缩放和平移，SVG
图形对象通常决不会在其用户坐标系统内移动；相反，将在 SVG 视区内/相对于 SVG
视区移动用户坐标系统（及其所有“已附带”图形）。因此，从视区的角度来看，已移动图形对象。换言之，通常你可以移动或转换“已附带”图形对象的用户坐标系统，而非图形对象本身。

牢记上述内容，可按如下方式解释 4 个数字（ULCx、ULCy、UUwidth 和 UUheight）：

ULCx 和 ULCy - 移动用户坐标系统（在其中绘制图形对象的区域）的原点，这样点 (ULCx,
ULCy) 将出现在定义的 SVG 视区的左上角。也就是说，在视区内以可视方式移动用户坐标系统，这样用户坐标点 (ULCx,
ULCy) 将出现在 SVG 视区的左上角。这将停止移动（相对于视区而言）用户坐标系统的原点及其所有“已附带”图形对象。

在下面的示例中，用户坐标系统等效于隐式视区坐标系统。