【SVG】為了前端頁面的美麗，我選擇學習SVG
博客說明
文章所涉及的資料來自互聯網整理和個人總結，意在於個人學習和經驗匯總，如有什么地方侵權，請聯系本人刪除，謝謝！
說明
SVG在之前自學的過程中，其實一直都是很高深的樣子不敢觸碰，但是想要理解終究都會走到這一步的。😊再怎么看起來難的技術都是由簡單的知識點累計起來的。
什么是SVG？
-
SVG 意為可縮放矢量圖形（Scalable Vector Graphics）。
-
它使用 XML 格式定義圖像。
-
SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失。
-
SVG 是萬維網聯盟的標准。
-
SVG 與諸如 DOM 和 XSL 之類的 W3C 標准是一個整體。
總的來說，SVG就是一個由XML定義的一個文件，由於是矢量圖形，所以它的圖形質量非常高。
由於SVG是XML文件，SVG圖像可以用任何文本編輯器創建，但是復雜的圖形還是得借助圖形編輯工具喲
SVG的優勢
- SVG 可被非常多的工具讀取和修改（比如記事本）。
- SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
- SVG 是可伸縮的。
- SVG 圖像可在任何的分辨率下被高質量地打印。
- SVG 可在圖像質量不下降的情況下被放大。
- SVG 圖像中的文本是可選的，同時也是可搜索的（很適合制作地圖）。
- SVG 是開放的標准。
- SVG 文件是純粹的 XML。
SVG 的主要競爭者是 Flash。與 Flash 相比，SVG 最大的優勢是與其他標准（比如 XSL 和 DOM）相兼容。而 Flash 則是未開源的私有技術。
一個小小的示例
示例代碼
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>
效果
代碼解析
<xml>第一行包含了 XML 聲明。- standalone 屬性規定此 SVG 文件是否是"獨立的"，或含有對外部文件的引用，standalone="no" 意味着 SVG 文檔會引用一個外部文件 - 在這里，是 DTD 文件。
<svg>和</svg>是表示SVG代碼，相當於開始標簽和結束標簽，這是根元素。- width 和 height 屬性可設置此 SVG 文檔的寬度和高度。
- version 屬性可定義所使用的 SVG 版本。
- xmlns 屬性可定義 SVG 命名空間。
<circle>用來創建一個圓。cx 和 cy 屬性定義圓中心的 x 和 y 坐標。如果忽略這兩個屬性，那么圓點會被設置為 (0, 0)。r 屬性定義圓的半徑。- stroke 和 stroke-width 屬性控制如何顯示形狀的輪廓。我們把圓的輪廓設置為 2px 寬，黑邊框。
- fill 屬性設置形狀內的顏色。我們把填充顏色設置為紅色。
- 關閉標簽的作用是關閉 SVG 元素和文檔本身。
注意：所有的開啟標簽必須有關閉標簽！
如何在HTML中使用SVG？
SVG 文件有5種方法嵌入 HTML 文檔：<img>、<embed>、<object> 、 <iframe>、直接嵌入HTML代碼中。
使用 <img> 標簽
作為圖片、背景被引入
語法:
<img src="circle1.svg" alt=""/>
使用 <embed> 標簽
- 優勢：所有主要瀏覽器都支持，並允許使用腳本
- 缺點：不推薦在HTML4和XHTML中使用（但在HTML5允許）
語法:
<embed src="circle1.svg" type="image/svg+xml" />
使用 <object> 標簽
- 優勢：所有主要瀏覽器都支持，並支持HTML4，XHTML和HTML5標准
- 缺點：不允許使用腳本。
語法:
<object data="circle1.svg" type="image/svg+xml"></object>
使用<iframe> 標簽
- 優勢：所有主要瀏覽器都支持，並允許使用腳本
- 缺點：不推薦在HTML4和XHTML中使用（但在HTML5允許）
語法:
<iframe src="circle1.svg"></iframe>
直接在HTML嵌入SVG代碼
- 優勢：操作方便，動態調整
- 缺點：HTML頁面太過冗長，對編碼不友好
語法:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
SVG的基本形狀
矩形 <rect>
示例一：
正常的矩形
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100" style="fill:rgb(122,122,0);stroke-width:2;stroke:rgb(0,0,0)" />
</svg>
效果：
代碼解析:
- rect 元素的 width 和 height 屬性可定義矩形的高度和寬度
- style 屬性用來定義 CSS 屬性
- CSS 的 fill 屬性定義矩形的填充顏色（rgb 值、顏色名或者十六進制值）
- CSS 的 stroke-width 屬性定義矩形邊框的寬度
- CSS 的 stroke 屬性定義矩形邊框的顏色
示例二：
填充和邊框的透明度
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:red;stroke-width:5;fill-opacity:0.5;stroke-opacity:0.5" />
</svg>
效果：
代碼解析:
- x 屬性定義矩形的左側位置（例如，x="0" 定義矩形到瀏覽器窗口左側的距離是 0px）
- y 屬性定義矩形的頂端位置（例如，y="0" 定義矩形到瀏覽器窗口頂端的距離是 0px）
- CSS 的 fill-opacity 屬性定義填充顏色透明度（合法的范圍是：0 - 1）
- CSS 的 stroke-opacity 屬性定義輪廓顏色的透明度（合法的范圍是：0 - 1）
示例三：
整個元素的透明度
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px">
<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.4" />
</svg>
效果：
代碼解析:
- CSS opacity 屬性用於定義了元素的透明值 (范圍: 0 到 1)。
示例四：
圓角矩形
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px">
<rect x="50" y="20" rx="20" ry="20" width="150" height="160" style="fill:red;stroke:black;stroke-width:1;opacity:0.5" />
</svg>
效果：
代碼解析:
- rx 和 ry 屬性可使矩形產生圓角。
圓形 <circle>
示例：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="red" stroke-width="2" fill="blue" />
</svg>
效果：
代碼解析:
- circle 標簽可用來創建一個圓
- cx和cy屬性定義圓點的x和y坐標。如果省略cx和cy，圓的中心會被設置為(0, 0)
- r屬性定義圓的半徑
橢圓 <ellipse>
示例：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
<ellipse cx="300" cy="80" rx="100" ry="50" style="fill:red;stroke:purple;stroke-width:2" />
</svg>
效果：
代碼解析:
- ellipse 標簽可用來創建一個橢圓
- CX屬性定義的橢圓中心的x坐標
- CY屬性定義的橢圓中心的y坐標
- RX屬性定義的水平半徑
- RY屬性定義的垂直半徑
線 <line>
示例：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="0" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:5" />
</svg>
效果：
代碼解析:
- line 標簽可用來創建一條直線
- x1 屬性在 x 軸定義線條的開始
- y1 屬性在 y 軸定義線條的開始
- x2 屬性在 x 軸定義線條的結束
- y2 屬性在 y 軸定義線條的結束
折線 <polyline>
示例一：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="20,20 40,25 60,40 80,10 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
</svg>
效果：
代碼解析:
- polyline 是用於創建任何只有直線的形狀
- points是點的集合
示例二：
畫一個五角星
<svg style="height:300px;width:300px;" xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="100 10,40 180,190 60,10 60,160 180" style="fill:blue;stroke:blue;stroke-width:1" />
</svg>
效果：
代碼解析:
利用了填空，因為線段是不閉合的
多邊形 <polygon>
示例一：
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210"
style="fill:red;stroke:purple;stroke-width:1"/>
</svg>
效果：
代碼解析:
- polygon標簽用來創建含有不少於三個邊的圖形
- points是點的集合
示例二：
畫一個五角星
<svg style="height:300px;width:300px;" xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="100 10,40 180,190 60,10 60,160 180" style="fill:none;stroke:black;stroke-width:5"/>
</svg>
效果：
代碼解析:
最后一個點會自動閉合，這也是和polyline的一個區別
路徑 <path>
路徑數據：
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Bézier curve
- T = smooth quadratic Bézier curveto
- A = elliptical Arc
- Z = closepath
示例：
畫一個三角形
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M150 0 L75 200 L205 270 Z" />
</svg>
效果：
代碼解析:
定義了一條路徑，它開始於位置150 0，到達位置75 200，然后從那里開始到205 270，最后在150 0關閉路徑。
總結
SVG的基礎部分已經介紹了，但對於path的運用才剛剛開始，后續會專門細聊一下path，當然還有SVG的一些”高級“屬性。
其實一路操作下來，發現SVG的操作和我們使用PS、AI等繪圖工具的原理大致相像，對於我們來理解此類圖形的繪制也有一定的幫助。
感謝
萬能的網絡
公眾號-歸子莫，小程序-小歸博客