本主題示範了如何使用可縮放的向量圖形 (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="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 特性。 window 元素掛接（與 svg 或 body 元素相對），這樣一來，無論縮放層級如何，滑鼠滾輪在整個網頁上都是活動的。svg 元素的 viewBox 屬性以避免與縮放有關的呈現問題（在沒有 viewBox 屬性的情況下進行嘗試即可觀察該問題）。在放大某個特定 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 特性值相反，此樣本通過修改
svgviewBox 特性的後兩個值（寬度和高度）來實現縮放功能。
可將 Excel（或其他應用程式）與 Visio 2010 配合使用來建立複雜而詳細的 SVG 組織 (org) 結構圖，然後支援 SVG 的瀏覽器可顯示該圖。我們會將此過程分為多個組成部分來對其進行描述：
組織圖列表的格式很簡單。例如，在下面的試算表段中，虛擬公司的每個員工都列出了其姓名、其上級以及圖中要顯示的其他有用資訊。
| 名稱 | 報告到 | 標題 | 部門 | 電話 |
|---|---|---|---|---|
| 員工姓名 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 中，完成以下步驟：
注意 如果你希望你的組織圖位於一個 Visio 2010 頁面上，請在使用該嚮導時選擇“指定每頁顯示的組織圖內容”。
有關詳細資料，請參閱 Visio 2010 協助文檔的“建立組織圖”主題中的“使用現有資料來源自動建立組織圖”部分。
完成該嚮導後，根據需要調整產生的 Visio 2010 組織圖布局（可能減小字型），然後通過“另存新檔”對話方塊以可伸縮向量圖形 (*.svg) 格式儲存組織圖。現在，支援的 網頁瀏覽器中可顯示此 SVG 檔案，如下個部分中所述。
在網頁中顯示獨立的 SVG 檔案。應用程式（如 Visio 2010 或
InkScape）產生獨立的 SVG 檔案之後，你可以採用多種方式在支援的瀏覽器中顯示此 SVG 檔案。
顯示獨立的 SVG 檔案的一種最簡單的方法是，在支援獨立 SVG 的瀏覽器中開啟該檔案。例如，單擊以下連結可開啟已用獨立 SVG 格式儲存的 100 名員工 Visio 2010 組織圖（如前所述）：orgChart.svg
然後，可以按根據需要使用該瀏覽器內建的縮放和滾動（平移）功能來瀏覽此 SVG 圖。可以在 Internet Explorer 9 中進行縮放操作，如上表所述。只需移動捲軸（如果存在）即可實現平移。
建立獨立的 SVG 檔案後，可通過多種方法將該檔案嵌入現有網頁或新網頁中。例如，可使用 iframe、embed、object 和img 元素以及 CSSbackground-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 的核心功能之一（即可縮放的向量圖形）。
相關主題Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
