2. 程式人生 > >如何使用 SVG 進行縮放和平移

如何使用 SVG 進行縮放和平移

阿新 • • 發佈：2019-01-19

本主題演示瞭如何使用可縮放的向量圖形 (SVG) 進行縮放和平移，並在結尾處提供了一個可進行縮放和平移的複雜組織結構圖示例。假定你掌握了基本的 HTML 和 JavaScript 知識，並能訪問可在 HTML5 中呈現內聯 SVG 的瀏覽器（如 Windows Internet Explorer 9）。

簡介

在本主題中，我們首先討論的是如何使用詳細的 SVG 測試圖在 SVG 中進行縮放和平移。然後，我們將描述如何使用 Microsoft Excel 和 Microsoft Visio 2010 建立複雜的 SVG 組織 (org) 結構圖，該圖可由支援 SVG 的瀏覽器顯示。

建立 SVG 測試圖

SVG 的一個主要功能是可“無限”放大詳圖。為了突出顯示此功能，我們需要建立一個適合進行縮放和平移的足夠詳細的 SVG 測試圖。在使用者放大該圖的某個特定功能並希望通過滾動瀏覽該功能的臨近區域時，平移就會變得很重要。

適合進行縮放和平移的可接受的 SVG 測試圖可能與下圖類似。

testGraphic.html 的螢幕快照

注意 對於 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="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 視區的左上角。這將停止移動（相對於視區而言）使用者座標系統的原點及其所有“已附帶”圖形物件。

    在下面的示例中，使用者座標系統等效於隱式視區座標系統。

    <!DOCTYPE html>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=9"/>  <!-- 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>

    可以通過視區上疊加了使用者座標系統的以下螢幕快照了解這一點。

    對齊使用者座標系統和視區座標系統

    在下一個示例中，ULCx 和 ULCy 分別為 -50 和 -25。

    <!DOCTYPE html>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=9"/>  <!-- 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="-50 -25 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>

    這將移動使用者座標系統，這樣使用者座標點 (-50, -25) 將顯示在視區的左上角。

    並置使用者座標系統和視區座標系統

    此操作的結果是將 SVG 圖形向下和向右“平移”。如果 UCLx 和 UCLy 都是正數值，則圖形將向上和向左移動（剪下圖形的一部分）。

  • UUwidth 和 UUheight - 這兩個值可分別確定水平方向和垂直方向上的每個使用者單位對應的視區畫素數。請考慮以下程式碼段：

    <svg width="300px" height="200px" viewBox="0 0 300 200">

    在此示例中，水平方向上每 300 個使用者單位對應於 300 畫素，垂直方向上每 200 個使用者單位對應於 200 畫素。換句話說，每個使用者單位等於 1 畫素。但在下面的示例中，水平方向上每 600 個使用者單位對應 300 畫素（或每個使用者單位對應 0.5 畫素），垂直方向上每 400 個使用者單位對應 200 畫素（或每個使用者單位對應 0.5 畫素）。請注意，此更改會導致所有圖形物件的大小減小一半，如下面的示例所示。

    <!DOCTYPE html>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=9"/>  <!-- 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="-50 -25 600 400"> 
    <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>

    此縮放（或調整大小）的效果如下面的螢幕快照所示。

    縮放的使用者座標系統

組織到一起

此示例中使用 viewBox 屬性的值（如前所述）來平移和縮放 SVG 測試圖：SVG 縮放 & 平移。

請記住，與以程式設計方式修改 svg 元素的 currentScale 特性值相反，此示例通過修改 svg 元素的 viewBox 特性的後兩個值（寬度和高度）來實現縮放功能。

建立複雜的 SVG 組織結構圖

可將 Excel（或其他應用程式）與 Visio 2010 配合使用來建立複雜而詳細的 SVG 組織 (org) 結構圖，然後支援 SVG 的瀏覽器可顯示該圖。我們會將此過程分為多個組成部分來對其進行描述：

  • 使用 Excel 建立分層組織結構圖列表。
  • 使用 Visio 2010 從一個 Excel 列表建立一個 SVG 組織結構圖。
  • 在網頁中顯示獨立的 SVG 檔案。

使用 Excel 建立組織結構圖列表

組織結構圖列表的格式很簡單。例如，在下面的電子表格段中，虛擬公司的每個員工都列出了其姓名、其上級以及圖中要顯示的其他有用資訊。

名稱 報告到 標題 部門 電話
員工姓名 1 VP 行政人員 x5555
員工姓名 2 員工姓名 1 VP 行政人員 x5556
員工姓名 3 員工姓名 1 VP 行政人員 x5557
。 。 。 。 。
。 。 。 。 。
。 。 。 。 。
員工姓名 100 員工姓名 22 單個參與者 咖啡服務 x5654

上表的長度可為所需合理長度，並可包含其他資訊（如果需要）。

注意 不需要 Excel 建立組織結構圖列表。可使用其他應用程式（包括簡單文字檔案）定義組織的層次結構。例如，以下連結提供 CSV 版本的 Excel 檔案：100 個員工組織結構圖列表（CSV 格式）。

有關詳細資訊，請參閱 Visio 2010 幫助文件的“建立組織結構圖”主題中的“使用現有資料來源自動建立組織結構圖”部分。

建立組織結構圖列表後，可將其匯入 Visio 2010 中，如下一部分中所述。

使用 Visio 2010 建立組織結構圖

匯入組織結構圖列表相對來說比較簡單。在 Visio 2010 中，完成以下步驟：

  1. 單擊“檔案”選項卡。
  2. 依次單擊“新建”、“公司”，然後雙擊“組織結構圖嚮導”。
  3. 在該向導的第一頁上，選擇“已儲存在檔案或資料庫中的資訊”。
  4. 單擊“下一步”，然後遵循該向導的剩餘步驟。

注意 如果你希望你的組織結構圖位於一個 Visio 2010 頁面上，請在使用該向導時選擇“指定每頁顯示的組織結構內容”。

有關詳細資訊，請參閱 Visio 2010 幫助文件的“建立組織結構圖”主題中的“使用現有資料來源自動建立組織結構圖”部分。

完成該向導後，根據需要調整生成的 Visio 2010 組織結構圖佈局（可能減小字型），然後通過“另存為”對話方塊以可伸縮向量圖形 (*.svg) 格式儲存組織結構圖。現在，支援的 Web 瀏覽器中可顯示此 SVG 檔案，如下個部分中所述。

在網頁中顯示獨立的 SVG 檔案。

應用程式（如 Visio 2010 或 InkScape）生成獨立的 SVG 檔案之後，你可以採用多種方式在支援的瀏覽器中顯示此 SVG 檔案。

顯示獨立的 SVG 檔案的一種最簡單的方法是，在支援獨立 SVG 的瀏覽器中開啟該檔案。例如，單擊以下連結可開啟已用獨立 SVG 格式儲存的 100 名員工 Visio 2010 組織結構圖（如前所述）：orgChart.svg

然後，可以按根據需要使用該瀏覽器自帶的縮放和滾動（平移）功能來瀏覽此 SVG 圖。可以在 Internet Explorer 9 中進行縮放操作，如上表所述。只需移動滾動條（如果存在）即可實現平移。

建立獨立的 SVG 檔案後，可通過多種方法將該檔案嵌入現有網頁或新網頁中。例如，可使用 iframe、embed、object 和img 元素以及 CSS background-image 樣式。特別要指出的是，object 元素很有用，因為該元素在使用者的瀏覽器不支援 SVG 時可支援輕鬆回滾功能。在下面的標記中，通過在 HTML 網頁中使用object 元素顯示獨立組織結構圖 SVG 檔案。

<!DOCTYPE html>
<html>
<head>  
  <title>100 Employee SVG Org Chart</title>
  <meta http-equiv="X-UA-Compatible" content="IE=9"/>  <!-- For intranet rendering only, remove when page is placed in production! -->
</head>

<body>
  <h1>Embedding SVG in a HTML Document</h1>
  <p>Embedding the file <em>orgChart.svg</em> using the <strong>object</strong> element:</p>
  <object data="orgChart.svg" width="800px" height="600px" type="image/svg+xml">
    <img src="orgChart.png" alt="PNG Image of 100 Employee SVG Org Chart" />
  </object>
</body>

</html>

請注意，如果使用者的瀏覽器不支援 SVG，則顯示 SVG 組織結構圖的 PNG 影象檔案。

以下連結擴充套件了此 HTML <object> 示例，以包含基於 JavaScript 的縮放和平移（使用前面所述的 viewBox 技術）：SVG Org Chart with Zoom & Pan。

SVG Org Chart with Zoom & Pan 示例使用前面所述的技術。但是，一個唯一差別是指令碼必須訪問單獨檔案orgChart.svg 中包含的 svg 元素。下面的程式碼段演示如何執行此操作。

var theSvgDocument = document.getElementById('objectElement').getSVGDocument();
theSvgElement = theSvgDocument.documentElement;

換句話說，可通過本地 object 元素訪問外部 SVG 文件物件。然後，此 SVG 文件物件提供了對外部 svg 元素的訪問權。

摘要

SVG 的向量特性決定了它完全適應需要高度詳細的資訊的圖形，如複雜的組織結構圖、體系結構圖、地圖及其他類似媒體。本主題將幫助你使用 SVG 的核心功能之一（即可縮放的向量圖形）。

相關主題

相關推薦

如何使用 SVG 進行縮放和平移

本主題演示瞭如何使用可縮放的向量圖形 (SVG) 進行縮放和平移，並在結尾處提供了一個可進行縮放和平移的複雜組織結構圖示例。假定你掌握了基本的 HTML 和 JavaScript 知識，並能訪問可在 HTML5 中呈現內聯 SVG 的瀏覽器（如 Windows Internet Explorer 9）。

純C++超解析度重建DRRN --改編--（二）歸一化（BatchNorm） 和 縮放和平移（Scale）

DRRN和前面相比增加了 1。歸一化（BatchNorm） 其中 均值(u) 和方差(std)需要除以一個約等於1000的比例因子，std 還要開平方 該部分已經放到載入模型中去了： // 輸入歸一化 x_norm = (x-u)/std, 其中u和std是個累計計算的

PictureBox中的圖片實現鼠標滑輪控制縮放和平移

bsp 容器 select drawing oid ane box move style 昨天剛學會了如何實現PictureBox控件中的圖像自動縮放和平移，下面我把過程給大家說一下： 參考了：https://www.cnblogs.com/jinqier/p/34972

利用canvas製作圖片（可縮放和平移）+相框+文字

前言： 　　公司一個售前問我能不能用H5做一個手機拍照，給相片新增相框和新增文字上傳到伺服器的功能，我當時一琢磨覺得可行，就利用空餘時間做了一個demo，去掉了拍照和上傳，如果以後有機會，會給補上，當然對於開發過webApp的朋友來做到這個很簡單。下面來看程式碼 1，思路 　首先我們需要準備

使用手勢對UIImageView進行縮放、旋轉和移動

nbsp boa use itl ans self. iges comm title [cpp] view plain copy // 添加所有的手勢 - (void) addGestureRecognizerToView:(UIView *)view

Unity釋出安卓進行模型縮放和旋轉

using UnityEngine; using System.Collections; public class ScaleAndRotate : MonoBehaviour {     private Touch oldTouch1;  //上次觸控點1(手指1)  

原生webgl學習（八） WebGL實現動畫：平移、縮放和旋轉

筆者在前面的文章主要是針對二維的靜態圖形進行開發；但有時候我們需要模型動起來，就像真實世界中的一切運動變化一樣。場景如果不是動態的，那麼可想而知，我們的世界是多麼枯燥乏味。為了讓我們開發的圖形應用看上去更加高大上，這一節筆者將和大家一起做一個動畫的例子；本節的內容用到了前面文

Android點選文字編輯進行縮放、移動和改變字型、顏色的實現

實現效果如下： 需求功能點包含： 1：介面的文字為動態新增； 2：點選介面中的文字，開啟編輯模式：可編輯文字內容，可設定字型顏色，字型型別，粗體及對齊等； 3：點選刪除從介面上清除文字塊； 4：拖動編輯模式下的文字塊的四個錨點，可以按文字中心位置縮放,同時工具欄跟隨文字

iOS控制元件的縮放，平移，旋轉和回到原點

<span style="font-family:Verdana;"><span style="font-family:Microsoft YaHei;"><span style="font-family:Microsoft YaHei;"&g

Android自定義imageview可對圖片進行多點縮放和拖動

package com.msstudent.view; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import andro

記一次產品需求：圖片等比縮放和CSS自適應布局16:9

是我 width 圖片展示 網上 IT tom 就會 很好 尺寸 前言 　　前陣子，產品跑過來問我現有的模板中沒有圖片模板，需要添加一個圖片模板；然而，他要求圖片在展示區最好能夠實現隨著窗口的變化而自動按圖片比例等比縮放，並且居中展示圖片。我當時想著，拋開技術實現層面，圖

吳恩達機器學習（第五章）--特徵縮放和學習率

一、特徵縮放  ----(1) 對於我們假設的式子（1），可能存在這樣一種情況就是有些資料遠大於另一些資料（eg:x_1>>x_2) 比如房子價格的例子： 房子的面積要遠大於房子的層數和房間數。在這種情況下可以看下圖，所產生的等高線的圈會很窄，在做梯度下降

特徵縮放和標準化

首先簡單講一下:其實我覺得這兩個本質上是一樣的 看了好多部落格和論壇 發現每個人講的都不一樣,我直接去英文維基百科 特徵縮放上查了Feature scaling 和 英文維基百科 標準化 才基本上明白 部落格的最後 我會特別說一下 吳恩達老師在講解PCA的時候 說的 均值標準化和特徵縮放 這

在應用中顯示的圖片很多情況不滿足業務需求，我們需要動態根據圖片的寬高進行縮放或載入中顯示的預設圖片，這是我沒就需要監聽圖片載入完成回撥，來看看微信小程式怎麼實現圖片載入完成回撥。

<swiper-item> <image src="{{item.image}}" class="slide-image" mode="widthFix" @tap="bannerjump({{item.l

在小程式中對圖片進行縮放時發生的問題記錄

在做一個小程式時，需要實現不規則的熱點，分別用於實現各自的點選事件。 1、第一種做法：在圖片載入完成後，計算實際縮放比例，然後重新計算每個熱區的尺寸和位置。 <view class="rmq_bg"> <image src="../../asset/img/main_bg.j

Html5 canvas學習5-圖形變形：縮放 旋轉 平移 變形

在canvas對當前繪圖物件進行變形時，其中心點是畫布(0,0)的座標原點。 1.縮放 縮放context.scale(x,y) x:x座標軸按x比例縮放   y:y座標軸按y比例縮放 比如1表示不縮放、0.5表示縮小50%、2.3表示放大2.3倍。  &nbs

WPF 的Canvas畫圖區整體縮放與平移（二）

WPF物件都具有RenderTransform的屬性，可以通過設定RenderTransform來對WPF的元素進行變換，無論是控制元件還是形狀都可以變換。典型的變換包括縮小放大與平移。 （一）縮放 （二）平移 為了實現平移，這裡以按下滑鼠中間鍵並移動滑鼠作為事件觸

學習OPENSEADRAGON之二 (介面縮放與平移規則設定)

OpenSeadragon入門瞭解請看第一篇：http://www.cnblogs.com/yingjiehit/p/4362377.html OpenSeadragon給我們提供了很多的可選介面元素，這些介面元素可以通過簡單的配置很容易的能使用了。 此外，OpenSeadragon旨在讓你

微信小程式的拖拽、縮放和旋轉手勢

在開發中，有時會遇到像App中的手勢那樣的效果，下面就仿照App實現了一下。 wxml部分： <view class="touch-container"> <view class="msg">{{msg}}</view> <image clas

微信小程序的拖拽、縮放和旋轉手勢

back start tle ring ffffff 部分 wxs absolut enter 在開發中，有時會遇到像App中的手勢那樣的效果，下面就仿照App實現了一下。 wxml部分： &lt;view class="touch-container&