快速了解viewBox的參數

viewBox屬性是用于指定用戶SVG圖像的坐標系統的原點以及尺寸的。所有在SVG內繪制的內容都是相對于這個坐標系統完成的。因為SVG畫布在所有方向都是無限延長的，你甚至可以在這個坐標系統的邊界之外的地方繪制圖形；但是這些相對于SVG視窗定位的圖形，也可以由用戶坐標系的位置來控制。

viewBox屬性使用四個參數來指定坐標系原點的位置以及它的尺寸：x y width height。初始情況下，這個坐標系等同于初始化的視窗坐標系（由SVG圖像的width和height確定），而且它的原點是在(0, 0)——即SVG的左上角。

通過改變x和y這兩個參數的值，可以調整原點的位置。改變width和height的值，可以改變坐標系統的尺寸。只使用viewBox屬性，就可以幫你擴展或裁剪SVG畫布。跟著示例一起閱讀。

重要提示：在本文章中，我不會改變viewBox在SVG視窗內的默認行為（比例和位置）。因為，根據屬性的默認行為，viewBox的內容會被盡可能地完全包含在視窗內，然后放置在中心位置。不過，使用preserveAspectratio屬性可以讓你自由地改變viewBox的尺寸和位置，但是在這篇文章中，這不是必需的技術，所以我們也不會在這里深入講解。
使用viewBox裁剪SVG，即使用viewBox屬性制作Art Direction的SVG

前陣子，我的一個客戶要求把他網站的SVG頭像按照不同的屏幕尺寸設置成不同的大小，從而使得它只有一小部分是在小屏幕上可見的，在中等的屏幕尺寸上可以看到再大一點的部分，然后在大屏幕上可以看到完整的內容。當時我腦子里首先出現的想法就是，他的要求其實是使用viewBox屬性來裁剪SVG圖像，然后根據不同的屏幕尺寸，顯示他想要看到的圖像的某部分。

通過改變SVG坐標系統的尺寸和原點位置，我們可以把SVG進行裁剪，并顯示我們希望在視窗中顯示的那部分內容。

我們來看看如何實現。

假設我們有如下這張完整的SVG圖像，然后我們想要把它裁剪成小屏幕的尺寸。這張圖是Freepik設計的可免費使用的房屋矢量圖，該圖片有Creative Commons Attribution 3.0 Unported協議的許可授權。為了簡單起見，我們先假設圖像只是要被裁剪成在中小屏幕上顯示的內容，以及大屏幕上顯示的完整的內容，如下所示。

左邊的圖的是我們將要使用viewBox屬性裁剪的完整的圖片，右邊的圖是我們希望在小屏幕上顯示的區域。

現在，通過改變viewBox屬性的值來裁剪SVG。有一些需要考慮的內容，我們等下會講到。但是首先，我們要改變坐標系統，讓它匹配上面的圖片中虛框矩形區域的內容。，通過調整系統的原點以及width和height的值，我們可以改變它初始的0 0 800 800參數值。

但是我們要如何獲知新坐標和新尺寸呢？重點是不要經過大量重復的實驗和錯誤。

有幾種方式。因為我們已經在圖形編輯器中（我的示例使用的是AI），我們可以使用編輯器的面板來獲取元素的位置和尺寸。

我畫這個虛線的矩形框，除了用來表示我想要在小屏幕上顯示的內容，還有一個原因就是：我們可以獲取這個矩形的位置和尺寸，然后把它們作為viewBox的值來使用。使用AI的變換面板（如下圖），我們獲取了我們需要的這些值。通過選擇矩形，并點擊右上角的變換鏈接，我們得到了如下圖所示的面板，包括我們所需要的x, y, width和height值。

這個AI中的變換面板可以用來獲取選中矩形的位置和尺寸的值

你可能注意到了，上面的值并不是整數，所以我們需要手動修改。根據上面的信息，我們把viewBox的值改成 0 200 512 512。

因為新的viewBox的寬高比和SVG視窗的寬高比是一樣的（都是正方形），viewBox內的內容將會擴大，并且只有被選中的區域會在視窗中顯示。改變viewBox的值之后，結果如圖：

新裁剪的SVG。只有我們指定使用viewBox屬性的位置在視窗中是可見的。藍色邊框表示SVG的視窗。

在這一點上，有一個問題需要解決：

如果被裁剪區域（即viewBox）的寬高比 != SVG視窗的寬高比？

在這種情況下，將會有明顯的溢出。明顯的溢出，我指的不是超出SVG視窗邊界的延伸，而是viewBox定義的相對于新用戶坐標系統的溢出。下圖作了相應的說明。

如果viewBox的寬高比和視窗的寬高比不同，SVG中的內容會溢出用戶坐標系統，結果可能會是這樣。

黑色邊框代表新的用戶坐標系，藍色邊框是SVG視窗。

上邊右圖中的黑色邊框是viewBox定義的區域。根據viewBox在視窗內的默認行為，它會被居中并盡可能放大，來保證自身內容盡可能地包含在視窗（藍色邊框）中。

因為SVG畫布從概念上來說，在所有方向都是無限延伸的，你可以在用戶坐標系統邊界之外繪制圖形，內容會直接溢出移動，如上圖所示。

如果你改變了SVG視窗的寬高比（SVG的width和height），來讓它們適應viewBox的寬高比，你就不會看到溢出了，因為viewBox的縮放是適應視窗的，和前面的示例一樣。

但是，在某些情況下，你可能不能或根本不想改變SVG的寬高比。比如說，如果你是使用SVG sprite作為一組圖像來顯示頁面上圖片的。在大多數情況下，圖像都有一個固定的寬高比——而且你并不想改變改變圖像的尺寸，就為了適應它里面的某一張小圖的內容。或者可能你嵌入了一個圖標系統，并希望所有的圖標在同一個時間都保持相同的尺寸。

為了剪掉多余的東西（比如說，sprite上的部分其它圖標，在視窗中顯示），你可以使用<clipPath>來把多余的部分裁剪掉。裁剪路徑可以是一個覆蓋了整個viewBox區域的<rect>元素，然后將該元素應用到root SVG。

但是，還有一點要記住：確保<rect>的x和y屬性和viewBox的保持一致，除非rect將被相對定位于原來的/初始化的系統的原點，那么SVG最終被裁剪的內容也是不確定的。

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表