來源：https://segmentfault.com/a/1190000015652209

?

本系列文章分為三個部分:

• 第一部分是?SVG 基礎。 主要講 SVG 的一些基礎知識，包括 SVG 基本元素，畫布和視窗等。
• 第二部分是?SVG 的坐標系統。主要會講繪圖坐標系， viewBox 以及preserveAspectRatio。
• 第三部分是 如何利用 SVG 來實現動畫及交互

SVG 基本元素及屬性

渲染順序

元素的渲染順序非常重要，這決定了一個 SVG 中哪些元素可見，哪些元素不可見。SVG 元素的一個規則是“后來居上”，也就是說越后面的元素越可見。

<svg width="100" height="100" style="outline: 2px solid red;"><rect x="0" y="0" width="50" height="50" fill="blue"/><rect x="0" y="0" width="50" height="50" fill="green"/> </svg>

在同一個位置創建了 50 * 50 的兩個矩形，由于越后面的元素越可見，因此我們只能看到綠色的矩形，藍色的矩形被它遮住了。

SVG 值的單位

在 SVG 中，你可以指定值的單位，也可以不指定值的單位。如果不指定值的單位，則默認使用像素 (px) 作為單位。

<svg width="100" height="100"><circle cx="0" cy="0" r="50%" fill="green"> </svg> width 和 height 都沒有指定單位，那么它們的單位就是 px，相當于寬 100px 高 100px。circle?的 r 使用百分比作為單位，因為 100px*50%=50px，則圓的半徑 r 等于 50px。

單位列表

SVG 支持的長度單位包含了常見的 CSS 單位，如下:

單位含義

em	相對于父元素的字體大小
px	相對于屏幕分辨率
%	相對于父元素
cm	即厘米
mm	即毫米
in	即英寸
pt	1/72 英寸
pc	1/21

SVG 畫布

SVG 畫布就是用來繪制 SVG 內容的一個區域。這個畫布可以無限延伸，你可以在這個畫布的任何位置繪制你想要的內容。

SVG 視窗（viewport）

SVG 視窗和瀏覽器視窗很像。你可以通過 SVG 視窗看到畫布，但其實你只看到了畫布的一部分，超過視窗的部分會被裁切并且隱藏。就像一個網頁，它可能比瀏覽器的視窗寬，可能比瀏覽器的視窗長，但只有在視窗內的頁面是可見的。

設置視窗大小

你可以通過給?<svg>?元素設置?width?和?height?來給 SVG 視窗設置寬和高。

當然，你也可以不給視窗設置寬和高，這就會交給用戶代理程序去決定，一般默認是 300px * 150px。我們不推薦視窗使用默認的大小，最好還是根據自己的需求去定義。

<!-- 視窗大小為 200px * 200px --> <svg width="200" height="200"><circle cx="0" cy="0" r="100" fill="red"/> </svg>

在 200px * 200px 的視窗內，以畫布的 0,0 點(畫布的原點和視窗的原點默認對齊)為圓心，半徑為 100 畫圓

為什么超過視窗的元素不可見

因為每個 SVG 元素都有一個默認的?overflow: hidden?樣式，所以超過視窗的內容不可見。你也可以通過設置?overflow: visible?讓超出視窗邊界的內容變得可見。

<svg width="100" height="100"><circle cx="0" cy="0" r="50" fill="green"/> </svg>

深入理解畫布和視窗

畫布和視窗是兩個容易混淆的概念，它們各自獨立卻又相互關聯。理解清楚它們之間的關系很有必要。

為了更好的去理解這兩個抽象概念，你可以把視窗想象成飛機上的窗戶，把畫布想象成無窮無盡的風景，只有在這個窗口內的風景才能被看到。

畫布和視窗之間的關聯

每創建一個?<svg>?元素，就相當于創建了一個無窮大的畫布，同時創建了一個視窗。

畫布和視窗分別對應兩個坐標系統，一個用戶坐標系，一個視窗坐標系，這兩個坐標系統默認是對齊的。如果暫時不理解坐標系統也沒關系，請繼續往下看，我會在下一節詳細說明。

?

轉載于:https://www.cnblogs.com/thelongmarch/p/9332889.html

總結

以上是生活随笔為你收集整理的深入理解 SVG 系列（一） —— SVG 基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。