當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

什么是SVG？——SVG快速入门

發布時間：2024/1/1 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了什么是SVG？——SVG快速入门小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

最近在學習一個前端數據可視化D3.js，它的圖表繪制是基于SVG的，作為一個小菜雞，我并不知道什么是SVG，于是我決定把D3.js放一放，先學一下SVG。

那么什么是SVG呢？百度百科上是這么介紹的：“SVG是一種圖形文件格式，它的英文全稱為Scalable Vector Graphics，意思為可縮放的矢量圖形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）聯盟進行開發的。嚴格來說應該是一種開放標準的矢量圖形語言，可讓你設計激動人心的、高分辨率的Web圖形頁面。用戶可以直接用代碼來描繪圖像，可以用任何文字處理工具打開SVG圖像，通過改變部分代碼來使圖像具有交互功能，并可以隨時插入到HTML中通過瀏覽器來觀看。”

看完之后不明覺厲，就像小時候聽到函數、方程這種詞一樣，因為名詞太過不接地氣，導致還沒學就先慫了。不要被不了解的名詞嚇到，就我自學的感受來說，SVG其實很簡單，雖然它是基于XML，但是不了解XML也沒關系，畢竟HTML也是標記語言，只要用過HTML絕對能看懂下面的內容。

一、在HTML中使用SVG

（一）可以直接在HTML中嵌入SVG代碼

xmlns是命名空間，不了解XML的可能不知道是什么意思，無所謂，這個參數是固定的，照著寫就行了。

通過上面的代碼就能在頁面中繪制一個圓形

（二）單獨建一個SVG文件，并在HTML中引入

建一個example1.svg文件，內容如下：

?然后在HTML通過標簽引入：

這三種標簽都適用于HTML5標準，并且目前大部分瀏覽器都是支持的。

效果為：

當然也可以用“<a>”標簽做一個鏈接，連到SVG文件

<a href="example1.svg">SVG文件</a>

二、基礎形狀標簽

SVG提供了一些標簽來幫助我們快速繪制常用形狀。

（一）矩形

樣式的設置也非常簡單，和CSS的行內樣式表一樣，屬性名也都基本和在HTML中使用CSS時相同，如上。目前我所用到的唯一不同的是矩形圓角用rx和ry這兩個屬性進行設置。

把style=“”去掉，全部寫成屬性=值的形式也是可以的，如下：

（二）圓形

cx和cy定義圓心的位置，不設置的話就是(0,0)，r是半徑。

（三）橢圓

橢圓跟圓的區別是橢圓有長軸和短軸，所以有兩個屬性rx和ry分別表示水平軸和垂直軸的長度

（四）直線

直線也很簡單，用兩組(x,y)坐標分別設置起點和終點即可。

（五）折線

折線其實也不復雜，就比直線多定義幾個點而已，注意每組點之間用空格隔開而不是分號。

（六）多邊形

多邊形稍微復雜一點點，它跟折線很像，也是定義一些點，只不過最后一個點會和第一個點連起來，形成一個封閉圖形。

關鍵在于fill-rule屬性，該屬性用來如何判斷畫布上的某區域是否屬于該圖形“內部”（內部區域將被填充），當然，對三角形或矩形這種路徑沒有交叉的簡單圖形，不需要使用該屬性，下面的例子是一個五角星。

1.fill-rule默認是nonzero，它的規則就是要判斷一個點是否在圖形內，從該點作任意方向的一條射線，然后檢測射線與圖形路徑的交點情況。從0開始計數，路徑從左向右穿過射線則計數加1，從右向左穿過射線則計數減1。得出計數結果后，如果結果是0，則認為點在圖形外部，否則認為在內部。

比如上圖中的P點和從P點做的射線，經過了兩條圖形的路徑BC和EA，兩條路徑均是從右向左穿過射線，所以計數為2，認為該點在內部。

2.fill-rule的另一個值是evenodd，也是做射線，但是做完之后數和圖形路徑的交點個數，奇數就認為是在內部，偶數就認為在外部。所以將上面代碼中的fill-rule改成evenodd后就變成了下面的效果。

（七）路徑

路徑和折線的區別在于折線是用直線把點連起來，而路徑可以通過參數繪制出光滑的曲線。路徑可以實現折線的效果，但折線卻并不能替代路徑。

路徑算是這些標簽里面最復雜的一個，參數非常多，而且使用不同參數時，后面所跟的點的個數也不相同，我想在自己嘗試了所有不同的路徑參數之后，單獨寫一篇文章對路徑做一個詳細介紹，下面只是做個入門。路徑的詳細講解文章已經發布，鏈接為：

參數如下：可以用小寫字母，但是含義不一樣，大寫表示絕對絕對定位，而小寫表示相對定位。

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 閉合（從最后一個點連直線到起始點）

所以上面代碼的意思就是從(0, 350)出發，使用二次貝塞爾曲線分別由(150,-300)控制點控制最終到達(300, 0)結束點，不閉合。（注意用的是小寫的q，所以這里的(150, -300)和(300, 0)是相對于起點而言的，和起點的(0, 350)不是同一個坐標系）。這里只是粗略介紹一下，路徑所有命令的詳細解析會在下一篇文章中。

三、文本標簽

基本用法很簡單，和HTML一樣在開始和結束標簽中間寫文本就行。

（一）子文本

每個<tspan>和和<text>一樣，單獨占一行，而且可以有自己的樣式。但是必須包在<text>標簽內，不能單獨用。

<text x="10" y="20" style="fill:rgb(0, 174, 255);">峰兄兄:<tspan x="10" y="45">菜雞程序員</tspan><tspan x="10" y="70">正在努力中</tspan> </text>

（二）旋轉文字

<text x="10" y="45" transform="rotate(90 20,40)">正在努力中</text>

rotate中的三個參數分別是順時針旋轉的度數、垂直、水平平移的距離（正值表示向上、向右）

（三）文字沿路徑

定義一條路徑，然后通過textPath標簽進行設置即可

<defs><path id="path1" d="M 0 100 q 100 80 200 0" stroke="blue" stroke-width="5" fill="none" /> </defs> <text x="10" y="100" style="fill:red;"><textPath xlink:href="#path1">祝你天天開心，都有好心情</textPath> </text>

?以上就是SVG入門的內容，后面還有關于路徑path和漸變色的詳細總結。

寫在最后

這是我在稀土掘金發過的文章，稀土掘金的個人主頁為峰兄兄的個人主頁 - 動態 - 掘金，兩邊都會更新，那邊一般會早個幾天。歡迎大家關注~

文章中的所有圖都是我運行自己練習時的代碼截的圖，原理圖也是在截圖的基礎上，在畫圖工具中編輯的，希望能得到更多人的認可，也希望能尊重我的勞動成果，未經許可不要轉載哦~?

總結

以上是生活随笔為你收集整理的什么是SVG？——SVG快速入门的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：【代码】QQ群最近聊天记录做成词云
下一篇：自动化测试RF+Selenium环境搭建