基本概念

svg(Scalable Vector Graphics)是一種基于XML語法的圖像格式，全稱是可縮放矢量圖，其它圖像格式都是基于像素處理的，SVG則是屬于對(duì)圖像的形狀描述，所以它本質(zhì)上是文本文件，體積較小，且不管放大多少倍都不會(huì)失真.SVG是面向圖形，HTML時(shí)面向文本。

嵌入到HTML

SVG可以寫在一個(gè)獨(dú)立的文件中，然后用img, object, embed, iframe等標(biāo)簽插入網(wǎng)頁(yè)

<img src="circle.svg">
<object id="object" data="circle.svg" type="image/svg+xml"></object>
<embed id="embed" src="icon.svg" type="image/svg+xml">
<iframe id="iframe" src="icon.svg"></iframe>

SVG文件可以轉(zhuǎn)為base64編碼，然后作為Data URI寫入網(wǎng)頁(yè)

<img src="data:image/svg+xml;base64,[data]" />

SVG書寫的注意點(diǎn)

SVG的所有元素

SVG的所有元素

SVG的所有屬性

SVG的所有屬性

常用的形狀元素

其實(shí)上圖只是對(duì)一些常用svg標(biāo)簽的初步認(rèn)識(shí)，因?yàn)閟vg所提供的標(biāo)簽不止這些，而且比如path標(biāo)簽是在svg中最為通用的形狀標(biāo)簽，因?yàn)樗梢酝ㄟ^設(shè)置路徑畫出其它圖形，比如矩形，圓，橢圓，多邊形，多線段，甚至是復(fù)雜的貝塞爾曲線等等

path

第一次看到svg的標(biāo)簽的時(shí)候，打開控制臺(tái)，也是一臉懵逼，首先這里面的d屬性是個(gè)啥，M是啥，L是啥，Z是啥，H是啥，V是啥，C是啥，S是啥，Q是啥，T是啥，A是啥，我... 打擾了，打擾了

嗯，26個(gè)兄弟快湊齊了，馬上就可以召喚神龍了。當(dāng)然，path這條神龍?jiān)趕vg界就是“爸爸”，啥玩意都能給你弄出來，

想要通過path勾勒出美妙的圖形，需要了解d這個(gè)屬性，path標(biāo)簽中的d屬性可以定義一系列的指令和參數(shù)，每一個(gè)指令通過一個(gè)字母來指定，比如上面說的M，它表示移動(dòng)到，也就是"move to"的意思，比如讓我們移動(dòng)到（10, 10）的坐標(biāo)點(diǎn)，就可以這樣寫：

<rect d="M10 10" />'

當(dāng)然每一種字母都是區(qū)分大小寫的，比如M是基于畫布上的一個(gè)絕對(duì)坐標(biāo)，而m則是基于上一個(gè)點(diǎn)的坐標(biāo)，也就是相對(duì)坐標(biāo)。比如有下面兩種指令

<path d="M20,20 L40 40 M60 60 L80 80" fill="none" stroke="blue" stroke-width="5"/>

<path d="M20,20 L40 40 m60 60 L80 80" fill="none" stroke="blue" stroke-width="5"/>

兩個(gè)path唯一的區(qū)別就是第三個(gè)指令，一個(gè)是M60 60, 一個(gè)是m60 60

線段指令（Line commands）

比如用H和V來繪制一個(gè)矩形, 我們一步一步來

step1

<path d="M10 10 H 90" fill="none" stroke="blue"/>

step2

<path d="M10 10 H 90 V 90" fill="none" stroke="blue"/>

step3

<path d="M10 10 H 90 V 90 H 10" fill="none" stroke="blue"/>

step4

<path d="M10 10 H 90 V 90 H 10 V 10" fill="none" stroke="blue"/>

上面的寫法也可以通過一個(gè)指令來簡(jiǎn)寫一下，這就用到了Z指令

Z：該指令的作用是從當(dāng)前位置向起始點(diǎn)畫出一條線段，它一般都被放置在一連串節(jié)點(diǎn)的末尾，并且不區(qū)分大小寫。可以理解為”閉環(huán)“指令

所以上例可以寫成這樣，也能達(dá)到同樣的效果

<path d="M10 10 H 90 V 90 H 10 Z" fill="none" stroke="blue"/>

同樣，上例也可以通過相對(duì)定位的形式進(jìn)行改寫，效果是一致的

<path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="blue"/>

曲線指令（Curve commands）

一說到曲線，那貝塞爾曲線是繞不開的，對(duì)于曾高數(shù)掛科的我來說是很排斥的，但好在閑著蛋疼，遂學(xué)之。

path標(biāo)簽中有兩類貝塞爾曲線，一種叫做“三次貝塞爾曲線（cubic curve）“， 一種叫做”二次貝塞爾曲線（quadratic curve）“，這名字聽起來就不接地氣。

那先從三次貝塞爾曲線說起

C：該指令用于創(chuàng)建一個(gè)三次貝塞爾曲線，需指定三組參數(shù)

比如：

<path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>

首先，（20 20）和（40 20）表示控制節(jié)點(diǎn)，一個(gè)是描述曲線起始點(diǎn)的斜率，另一個(gè)是描述曲線終止點(diǎn)的斜率，最后一組（50 10）表示曲線的終點(diǎn)。總結(jié)一下這段示例，就是有一條從（10 10）到（50 10）的一條線段，通過設(shè)置兩個(gè)控制點(diǎn)的斜率，使這條線段的各個(gè)點(diǎn)彎曲成正確的（符合斜率趨勢(shì)的）曲線。

MDN上有多組曲線的對(duì)比示例。

這里面我們?cè)偬砑右环N情況，就是設(shè)置兩個(gè)水平的控制節(jié)點(diǎn)，來看看線段是如何變化的

<path d="M10 10 C 10 10, 40 10, 50 10" stroke="black" fill="transparent"/>

通過S指令能生成和上述示例中同樣的平滑曲線，使用S指令分為以下兩種情況

比如如下代碼

 <svg
 xmlns="http://www.w3.org/2000/svg"
 width="190"
 height="160"
 >
 <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>

 <circle cx="10" cy="80" r="2" fill="red"/>
 <circle cx="95" cy="80" r="2" fill="red"/>
 <circle cx="180" cy="80" r="2" fill="red"/>
 <circle cx="150" cy="150" r="2" fill="red"/>
 </svg>

我們通過不斷改變S的第一組節(jié)點(diǎn)來看圖形的變化趨勢(shì)

我們可以看到，隨著不斷給S指令結(jié)束控制節(jié)點(diǎn)的橫坐標(biāo)累加，曲線會(huì)向右偏移。

接下來看下S指令前面沒有其他C或者S指令的情況,代碼如下

<svg
xmlns="http://www.w3.org/2000/svg"
width="300"
height="300"
>
<path d="M10 80 S 95 150, 180 80" stroke="black" fill="transparent"/>

<circle cx="10" cy="80" r="2" fill="red"/>
<circle cx="95" cy="150" r="2" fill="red"/>
</svg>

另一種曲線是二次貝塞爾曲線（quadratic curve）

它通過指令Q來來進(jìn)行描述，相較于三次貝塞爾曲線，它更為簡(jiǎn)單。

Q：只需要指定兩組參數(shù)，第一組表示控制節(jié)點(diǎn)的坐標(biāo)，第二組表示終點(diǎn)坐標(biāo)。

示例：

<svg
xmlns="http://www.w3.org/2000/svg"
width="300"
height="300"
>
<path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>

<circle cx="10" cy="80" r="2" fill="red"/>
<circle cx="95" cy="20" r="2" fill="red"/>
<circle cx="180" cy="80" r="2" fill="red"/>
</svg>

和三次貝塞爾類似，二次貝塞爾也提供了快捷的玩法，那就是T指令

T：通過找到前一個(gè)控制節(jié)點(diǎn)，來推斷出一個(gè)新的控制點(diǎn)，T指令后面只需要指定一組結(jié)束點(diǎn)坐標(biāo)即可，由于T指令是基于前一個(gè)控制點(diǎn)的基礎(chǔ)上來生成的，所以T指令之前必須要有Q指令或者其他T指令，否則生成的控制節(jié)點(diǎn)就和前一個(gè)控制節(jié)點(diǎn)就會(huì)重合，在畫布上看到的就僅僅是一條直線。

示例：

 <svg
 xmlns="http://www.w3.org/2000/svg"
 width="300"
 height="300"
 >
 <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>

 <circle cx="10" cy="80" r="2" fill="red"/>
 <circle cx="52.5" cy="10" r="2" fill="red"/>
 <circle cx="95" cy="80" r="2" fill="red"/>
 <circle cx="180" cy="80" r="2" fill="red"/>

 </svg>

在上面幾個(gè)例子中，兩種曲線都生成了同樣的結(jié)果，雖然三次貝塞爾允許更多的自由度，但是決定使用哪種曲線還要依照具體情形以及對(duì)稱曲線的數(shù)量來定

弧度（Arcs）

在svg中也可以創(chuàng)建弧度這種曲線，它通過A指令來指定，A指令可以接收7個(gè)參數(shù)

示例：

 <?xml version="1.0" standalone="no"?>
 <svg width="325px" height="325px" version="1.1" xmlns="http://www.w3.org/2000/svg">
 <path d="M80 80
 A 45 45, 0, 0, 0, 125 125
 L 125 80 Z" fill="green"/>
 <path d="M230 80
 A 45 45, 0, 1, 0, 275 125
 L 275 80 Z" fill="red"/>
 <path d="M80 230
 A 45 45, 0, 0, 1, 125 275
 L 125 230 Z" fill="purple"/>
 <path d="M230 230
 A 45 45, 0, 1, 1, 275 275
 L 275 230 Z" fill="blue"/>
 </svg>

餅圖

通過學(xué)習(xí)path，我們來繪制一個(gè)簡(jiǎn)單的餅圖

 <svg width="325" height="325" xmlns="http://www.w3.org/2000/svg">
 <path d="M80 80
 A 45 45, 0, 0, 0, 125 125
 L 125 80 Z" fill="green"/>
 <path d="M170 80
 A 45 45, 0, 0, 1, 125 125
 L 125 80 Z" fill="red"/>
 <path d="M170 80
 A 45 45, 0, 0, 0, 125 35 
 L 125 80 Z" fill="blue" />
 <path d="M80 80
 A 45 45, 0, 0, 1, 125 35
 L 125 80 Z" fill="pink"/>
 </svg>

小結(jié)

在最近的一些項(xiàng)目中，接觸到了部分有關(guān)svg的需求，所以這篇文章就是記錄下自己在學(xué)習(xí)svg的一部分總結(jié)，比較基礎(chǔ)，方便自己今后的復(fù)習(xí)和查閱。

參考資源

MDN SVG

總結(jié)

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com