這篇文章主要介紹了深入解析HTML5使用SVG圖像時的viewBox屬性用法,包括一些響應式設計相關的內容,需要的朋友可以參考下快速了解viewBox的參數
viewBox屬性是用於指定用戶SVG圖像的坐標系統的原點以及尺寸的。所有在SVG內繪製的內容都是相對於這個坐標系統完成的。因為SVG畫佈在所有方向都是無限延長的，你甚至可以在這個坐標系統的邊界之外的地方繪製圖形；但是這些相對於SVG視窗定位的圖形，也可以由用戶坐標系的位置來控制。
viewBox屬性使用四個參數來指定坐標係原點的位置以及它的尺寸：xy 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最終被裁剪的內容也是不確定的。
CSS Code複製內容到剪貼板