如何使用 SVG 进行缩放和平移
展开全部
基于 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 视区的左上角。这将停止移动（相对于视区而言）用户坐标系统的原点及其所有“已附带”图形对象。
在下面的示例中，用户坐标系统等效于隐式视区坐标系统。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/> <!-- For intranet rendering only, remove when page is placed in production. -->
<title>SVG viewBox Attribute Values</title>
</head>
<body style="padding:0px; margin:0px;">
<svg currentScale="1" width="300px" height="200px" viewBox="0 0 300 200">
<rect x="0" y="0" width="300" height="200"
style="stroke: black; fill: none; stroke-width: 1px;"/>
<circle cx="50" cy="100" r="25" style="fill: purple;"/>
</svg>
</body>
</html>
由于针对缩放和/或平移的用户界面可能随浏览器的不同而不同（或出于其他原因），因此实现你自己的基于 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 视区的左上角。这将停止移动（相对于视区而言）用户坐标系统的原点及其所有“已附带”图形对象。
在下面的示例中，用户坐标系统等效于隐式视区坐标系统。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/> <!-- For intranet rendering only, remove when page is placed in production. -->
<title>SVG viewBox Attribute Values</title>
</head>
<body style="padding:0px; margin:0px;">
<svg currentScale="1" width="300px" height="200px" viewBox="0 0 300 200">
<rect x="0" y="0" width="300" height="200"
style="stroke: black; fill: none; stroke-width: 1px;"/>
<circle cx="50" cy="100" r="25" style="fill: purple;"/>
</svg>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
