快速了解viewBox的參數(shù)

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

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

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

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

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

通過改變SVG坐標(biāo)系統(tǒng)的尺寸和原點位置，我們可以把SVG進行裁剪，并顯示我們希望在視窗中顯示的那部分內(nèi)容。

我們來看看如何實現(xiàn)。

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

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

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

但是我們要如何獲知新坐標(biāo)和新尺寸呢？重點是不要經(jīng)過大量重復(fù)的實驗和錯誤。

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

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

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

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

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

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

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

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

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

如果viewBox的寬高比和視窗的寬高比不同，SVG中的內(nèi)容會溢出用戶坐標(biāo)系統(tǒng)，結(jié)果可能會是這樣。

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

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

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

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

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

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

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

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