摘要：註在這篇文章中我們只考慮和為等比例的情況。最後實(shí)做出來的功能會(huì)像這樣子實(shí)做拖曳與縮放瞭解中的和在的世界中，空間的概念可以分成和兩個(gè)部分。實(shí)際感受的效果在她所撰寫文章中提供了非常好的實(shí)做案例。這個(gè)座標(biāo)系統(tǒng)是相對(duì)固定的。

本文章同步刊載於 PJCHENder 前端網(wǎng)頁(yè)資源站

不同於以往將 SVG 視為一張圖案（ICON 或 LOGO）的概念，在這篇文章中，我們要試著將 SVG 視為一個(gè)畫布（Canvas），而我們可以透過滑鼠來直接對(duì)這個(gè)畫布像 Google Map 一樣進(jìn)行拖曳和縮放。

要將 SVG 視為一個(gè)畫布，並實(shí)做出縮放或拖曳的功能，有許多對(duì)於 SVG 的基本概念是我們需要先瞭解的，就讓我們一步一步來瞭解。

註1：在這篇文章中我們會(huì)把 SVG 視為一個(gè)畫布（Canvas）而不是去探究 SVG 中各個(gè)元素（例如，）。
註2：在這篇文章中我們只考慮 viewport 和 viewBox 為等比例的情況。

最後實(shí)做出來的功能會(huì)像這樣子：實(shí)做 SVG 拖曳與縮放

在 SVG 的世界中，空間的概念可以分成 Viewport 和 ViewBox 兩個(gè)部分。在這篇文章中，我會(huì)把它 Viewport 比喻作相框，ViewBox 比喻作相片。

Viewport 相對(duì)上比較好理解，就是相框的大小，也就是你的眼睛看得到的範(fàn)圍，不管你的相片多大，你能看到的實(shí)際範(fàn)圍就是相框的大小。在網(wǎng)頁(yè)中我們可以透過設(shè)定 viewport 來調(diào)整我們相框的大小。

ViweBox 則可以想成是這張照片的大小，如果相片的大小和相框（viewport）一樣大的時(shí)候，自然不會(huì)有什麼問題，你可以從相框中看一樣大的相片。可是，如果相片（viewbox）比起相框來得大或來得小時(shí)，這時(shí)候就會(huì)比較麻煩些，你會(huì)需要多去控制說這張相片應(yīng)該要如何的排置在相框上，才能夠呈現(xiàn)出你想要呈現(xiàn)的東西，因此 ViewBox 中除了能夠控制的相片的大小之外，還能夠控制相片要如何擺放在相框中。

讓我們來瞭解一下 viewport 和 viewbox 的概念：

首先，我們可以直接在 SVG 元素上定義 viewport 的寬高，或者你也可以用 CSS 定義，基本上這個(gè) DOM 元素的寬高就是 viewport 的寬高，也就是你相框的寬高。接著我們可以在 SVG 中定義我們的圖案內(nèi)容，在這裡先用一隻鳥當(dāng)作示範(fàn)。

這時(shí)候便會(huì)得到如下的一個(gè) viewport：

再來我們可以設(shè)定 viewBox ， viewBox 的設(shè)定可以寫在 SVG 的標(biāo)籤上，設(shè)定屬性包含 這四個(gè)屬性，也就是 viewBox = " " 。

我們剛剛有提到，ViewBox 中除了能夠控制的相片的大小之外，還能夠控制相片要如何擺放在相框中，其中 和 就是在控制相片要如何擺放在相框中，而 和 則是相片的大小。

預(yù)設(shè)的情況下（沒有特別去設(shè)定 viewBox 的情況下）viewBox 的尺寸大小會(huì)和 viewport 一樣，因此當(dāng)我們把鳥的相片放入 svg 後，他會(huì)自動(dòng)填滿整個(gè)相框，兩個(gè)的大小會(huì)是一樣的，程式碼會(huì)像這樣：

相片會(huì)很完整的融入在相框當(dāng)中

透過 viewBox 的設(shè)定，我們可以進(jìn)一步放大或縮小我們的相片，這裡有一個(gè)原則是，viewBox 會(huì)自動(dòng)盡可能去填滿成 viewport 的大小＊，說起來很抽象，假設(shè)一開始我的 viewport 為 800 x 400 ，現(xiàn)在我們可以透過 viewBox 的設(shè)定，使得我們 viewBox 的大小變成 400 x 200，當(dāng)我們的相片大小設(shè)定的比相框還小時(shí)，它會(huì)在原本的相片上裁切一小塊區(qū)域（在這裡是 400 x 200），接著把它調(diào)整到填滿整個(gè) viewport 的大小（800 x 400)。

分解過程像是這樣（綠色是 viewport，藍(lán)色是 viewBox）

設(shè)定比 viewport 還要小的 viewBox：

裁切：

![SVG viewport and viewBox](https://2.bp.blogspot.com/-j8... "這時(shí)候因?yàn)槲覀冊(cè)O(shè)定的尺寸比相片原本的大小還要小，所以相片會(huì)被裁切。
")

填滿 viewport

文字範(fàn)本mdimg

這時(shí)候就會(huì)產(chǎn)生一個(gè)很神奇的現(xiàn)象，雖然我的相因?yàn)樵O(shè)定的尺寸片（viewBox）比原本的尺寸來的小，但是因?yàn)樗鼤?huì)自動(dòng)去填滿整個(gè) viewport 的緣故，所以實(shí)際上相片被放大了。

程式碼寫起來像是這樣，設(shè)定為 viewBox="0 0 400 200"：

類似的道理，當(dāng)我們?cè)O(shè)定的 viewBox 大於 viewPort 時(shí)，它會(huì)先把這張照片的底圖放大（先放大成 1600 x 800），然後在盡可能的塞入 viewport 當(dāng)中（這裡是 800 x 400）：

所以，雖然 viewBox 的設(shè)定（1600 x 800）大於原始 viewBox 的大小（800 x 400），但是實(shí)際上，照片在實(shí)際顯示上卻會(huì)被縮小。程式碼寫起來會(huì)像這樣子，viewBox="0 0 1600 800"：

在 viewBox 的設(shè)定中，包含了四個(gè)屬性值 viewBox = " "，除了上面我們所說的可以設(shè)定照片的大小外，也可以裡用 和 這兩個(gè)屬性來設(shè)定相片的位置。

例如說當(dāng)我設(shè)定 viewBox 的 min-x 為 150 時(shí)（ viewBox = "150 0 800 400" ），viewBox 會(huì)向左移動(dòng) 150 單位 ：

我們也可以同時(shí)設(shè)定 min-x 和 min-y ，例如（viewBox = "-400 -200 800 400"），會(huì)得到這樣的效果：

最後實(shí)際上可以看到的樣子：

在 viewBox 的設(shè)定的四個(gè)屬性值中 viewBox = "min-x min-y width height"，我們可以簡(jiǎn)單理解成前兩項(xiàng) min-x 和 min-y 控制的是位移（translate），可以達(dá)到左右移動(dòng)的效果；後兩項(xiàng) width 和 height 控制的則是縮放（scale）。

但是因?yàn)?viewBox 實(shí)際上影響的是 SVG 當(dāng)中的座標(biāo)系統(tǒng)（後面會(huì)說明 SVG 座標(biāo)系統(tǒng)），所以會(huì)和你的直覺有寫相反，例如，##當(dāng)你設(shè)定 min-x 和 min-y 越大時(shí)，實(shí)際上看到的畫面會(huì)往左上方移動(dòng)##；同樣地，##當(dāng)你設(shè)定width 和 height 越大時(shí)，實(shí)際上看到的畫面會(huì)往縮小##。

這個(gè)部分需要你花一些時(shí)間實(shí)際感受一下，非常建議利用下段中由 Sara Soueidan 所提供的實(shí)做案例感受。

Sara Soueidan 在她所撰寫文章中 Understanding SVG Coordinate Systems and Transformations (Part 1) — The viewport, viewBox, and preserveAspectRatio 提供了非常好的實(shí)做案例。

左上角的地方你可以去以用拖拉的方式去設(shè)定 viewBox 的值，以此感受 viewBox 的改變對(duì)於視覺上顯示的效果，另外，由於它的 viewport 是 (800 x 600) 所以建議你可以先把 viewBox 的長(zhǎng)寬設(shè)為 800 x 600（也就是初始化時(shí)預(yù)設(shè) viewport = viewBox 的狀況），接這再來實(shí)際操作看看 viewBox 的改變會(huì)有什麼樣的效果。

我們提到，當(dāng) viewBox 和 viewport 的尺寸大小不一樣時(shí)， viewBox 會(huì)盡可能的去填滿整個(gè) viewport ，可是在上面文章的例子中，我們都把 viewBox 的尺寸大小設(shè)定的和 viewPort 是等比例的情況，如果是不同比例的話，又要用什麼樣的方式來對(duì)齊和填滿呢？

這時(shí)候我們就會(huì)需要用到 preserveAspectRatio 這個(gè)屬性了。在這個(gè)屬性當(dāng)中可以設(shè)定對(duì)齊的方式（align）還有要用什麼樣的方式填滿（meet or slice）。在這篇文章中，我只打算探討 viewBox 和 viewport 為等比例的情況，我認(rèn)為要瞭解 viewport 和 viewBox 的概念時(shí)，先以等比例的情況當(dāng)作實(shí)例來練習(xí)是比較容易瞭解的，因?yàn)?strong>在等比例的情況下，preserveAspectRation 的值對(duì)於畫面的呈現(xiàn)是沒有任何影響的，如果對(duì)於 preserveAspectRatio 的屬性想要有更多的瞭解，可以參考這篇文章（[譯] 理解 SVG 座標(biāo)系統(tǒng)與 Transformations @ Andyyou），或進(jìn)一步參考文章中最後面所列的參考文章。

從上面我們可以看出當(dāng)我們?yōu)?SVG 元素設(shè)定 viewBox 時(shí)，SVG 會(huì)有很多特別的效果，我們可以視整個(gè) SVG 元素為一個(gè)畫布，對(duì)它進(jìn)行縮放和移動(dòng)，而實(shí)際上在 SVG 的世界中，我們要瞭解viewport 和 viewBox 實(shí)際上是處在兩個(gè)不同的座標(biāo)系統(tǒng)中

在 viewport 中，是我們過去所熟悉的，以瀏覽器中 DOM 為主的座標(biāo)系統(tǒng)，通常把它稱作 viewport 座標(biāo)系統(tǒng)（viewport coordinate system）或canvas 座標(biāo)系統(tǒng)（但是不要把它和 HTML 中的 Canva 標(biāo)籤搞混）。一般來說，在這個(gè)座標(biāo)系統(tǒng)中，1px 就是 1px 大，這個(gè)座標(biāo)系統(tǒng)是相對(duì)固定的。這個(gè)座標(biāo)系統(tǒng)是相對(duì)固定的。在後面的文章中，我會(huì)使用 viewport 座標(biāo)系統(tǒng)這個(gè)詞。

在 viewBox 的座標(biāo)系統(tǒng)中，就不是我們所習(xí)慣的情況了，我們一般把在 viewBox 的座標(biāo)系統(tǒng)吃做作 SVG 座標(biāo)系統(tǒng)（SVG coordinate system）、用戶座標(biāo)系統(tǒng)（user coordinate system）（或 the current coordinate system、user space in use）
。在後面的文章中，我會(huì)使用 SVG 座標(biāo)系統(tǒng)這個(gè)詞。

在這個(gè)座標(biāo)系統(tǒng)中，值是不一定要有單位的，如果我們沒有給它單位時(shí)，預(yù)設(shè)它會(huì)以 viewport 的單位為單位（例如，px），然而，恐怖的特別的地方在於，當(dāng)我們?cè)谠O(shè)定 viewBox 時(shí)，如果對(duì)於這當(dāng)圖片有縮放時(shí)，那麼它的 1 單位大小將不會(huì)再是 1px 。

為了幫助我們更進(jìn)一步的探討 SVG 座標(biāo)系統(tǒng)和 viewport 座標(biāo)系統(tǒng)，我們要來認(rèn)識(shí)三種不同的座標(biāo)名稱，分別是 offset、client 和 SVG Point。

其中 offset 和 client 所取得的值都是屬於 viewport 座標(biāo)系統(tǒng)中的座標(biāo)值（也就是 1px 就是真實(shí)的 1px），兩者的差別在於 offset 是相對(duì)於 container 左上角的點(diǎn)，也就是以 container 左上角為（0, 0）；而 client 則是相對(duì)於 window 左上角（瀏覽器視窗左上角）的點(diǎn)，以 window 左上角為（0, 0），越右 X 值越大，越下 Y 值越大。

SVG 座標(biāo)系統(tǒng)就比較特別一點(diǎn)了，它有專屬的座標(biāo)點(diǎn)，可以透過 viewport 座標(biāo)系的 client 座標(biāo)加以轉(zhuǎn)換。

我們會(huì)在下一篇文章中說明如何取得這三個(gè)座標(biāo)值，但目前你需要知道有這三種不同的座標(biāo)名稱。

我們用 Sara Soueidan 在所提供的互動(dòng)案例來做更多說明，一開始的時(shí)候，我先把 viewBox 設(shè)成和 viewport 一樣大，在這種情況下 SVG 座標(biāo)系統(tǒng)中的 1 單位大小會(huì)和 viewport 的一樣大，也就是 1px。留意藍(lán)色的尺標(biāo)是 SVG 座標(biāo)系統(tǒng)、灰色的尺標(biāo)則是 viewport 座標(biāo)系統(tǒng)：

同時(shí)我們標(biāo)下鳥右下角的這個(gè)點(diǎn)，讓我們後面能夠更清楚 SVG 座標(biāo)系統(tǒng)的變化。在一開始的時(shí)候，因?yàn)?viewport 等同於 viewBox 的緣故，所以 SVG 座標(biāo)系統(tǒng)中這個(gè)點(diǎn)，和 viewport 座標(biāo)系統(tǒng)中的 offset 座標(biāo)點(diǎn)，都會(huì)是（200, 300）：

接著，我們可以看到，當(dāng)我把 viewBox 設(shè)為 viewport 的一半（viewBox = "0 0 400 300"），也就是讓鳥看起來變 2 倍大時(shí)，這時(shí)候 SVG 座標(biāo)系統(tǒng)中的 1 單位，會(huì)變成 viewport 的 2 單位（這裡就是 2px）。

但要留意的是，雖然圖案被放大了兩倍，但是鳥右下角這點(diǎn)在藍(lán)色尺標(biāo)的 SVG 座標(biāo)系統(tǒng)中一樣是（200, 300），可是灰色尺標(biāo)的 viewport 座標(biāo)系統(tǒng)中的 offset 座標(biāo)點(diǎn)會(huì)變成兩倍，也就是（400, 600）。

同樣的道理，當(dāng)我把 viewBox 設(shè)為 viewport 的 2 倍大（viewBox = "0 0 1600 800"），也就是讓鳥看起來變 2 倍大時(shí)，這時(shí)候 SVG 座標(biāo)系統(tǒng)中的 1 單位，會(huì)變成 viewport 的 1/2 單位（這裡就是 0.5px）。

這時(shí)候你會(huì)看到，雖然藍(lán)色尺標(biāo)的 SVG 座標(biāo)系統(tǒng)中，右下角座標(biāo)仍然是（200, 300），但是 viewport 座標(biāo)系統(tǒng)中的 offset 座標(biāo)點(diǎn)則變成了（100, 150）。

在這篇文章中有幾個(gè)你應(yīng)該留意的重點(diǎn)：

知道有 viewport 和 SVG 這兩種不同的座標(biāo)系統(tǒng)

知道有 offset, client, SVGPoint 這三種不同的座標(biāo)點(diǎn)

知道有 offset 和 client 屬於 viewport 座標(biāo)系統(tǒng)；SVGPoint 屬於 SVG 座標(biāo)系統(tǒng)

知道透過 viewBox 的設(shè)定可以達(dá)到縮放和移動(dòng)的效果

Understanding SVG Coordinate Systems and Transformations

[中譯]理解 SVG 座標(biāo)系統(tǒng)和 Transformation @ Andyyou

SVG 研究之路 (23) - 理解 viewport 與 viewbox @ OXXO

首頁(yè)圖片來源 @ TeamTreehouse