SVG（可縮放矢量圖）

SVG是一種基于XML語法的圖像格式。一般我們看到的jpg、png等格式的圖片是基于像素對(duì)圖像進(jìn)行描述的，這種圖片存在著放大失真問題。

而SVG是對(duì)圖片的形狀描述，本質(zhì)上是文本文件，體積較小，放大不會(huì)失真。

SVG圖片制作

在VSCODE編輯器中，我們可以發(fā)現(xiàn)一個(gè)SVG圖片是由代碼繪制出來的，也就是通過SVG標(biāo)簽來繪制SVG圖形。

常用的形狀如下：

矩形：rect

圓形：circle

橢圓：eclipse

線條：line

多線條：polyline

多邊形：polygon

路徑：path

繪制圓角矩形（單標(biāo)簽）

<rect />

屬性：rx :定義圓角x軸方向的半徑長(zhǎng)度

屬性：ry ：定義圓角y軸方向的半徑長(zhǎng)度

以下是大部分SVG標(biāo)簽存在的通用屬性

width：定義矩形寬度（多用于矩形），如100px

height：定義矩形高度（多用于矩形），如100px

fill：定義矩形的填充顏色（支持顏色英文單詞，rgb顏色，和十六進(jìn)制表示的顏色）

stroke-width：定義矩形的邊框?qū)挾?/p>

stroke：定義矩形邊框的顏色

繪制圓形

<circle />

屬性：cx:定義圓形中心的x坐標(biāo)。

cy：定義圓形中心的y坐標(biāo)

默認(rèn)(cx,cy)為（0,0）

r：定義圓形的半徑。

同樣有邊框顏色，邊框?qū)挾群捅尘吧韧ㄓ脤傩浴?/p>

繪制橢圓形

<ellipse />

屬性：cx:定義團(tuán)員中心的x坐標(biāo)

cy：定義橢圓中心的y坐標(biāo)

rx:定義水平半徑

ry:定義垂直半徑

繪制線條

<line />

屬性：

x1

y1

x2

y2

由（x1,y1）為起點(diǎn)，以(x2,y2)為終點(diǎn)。

這里注意和數(shù)學(xué)中的坐標(biāo)系是不同的，這里是以左上角的坐標(biāo)為（0,0），一直往右下進(jìn)行繪制的。

繪制多邊形

<polygon />

屬性：

points：定義多個(gè)坐標(biāo)，至少要有三個(gè)坐標(biāo)。畢竟一個(gè)坐標(biāo)為點(diǎn)，兩個(gè)坐標(biāo)為線，三個(gè)坐標(biāo)才能繪制一個(gè)平面多邊形。

例如points="220,100 231,102 30,45"

繪制多線條

<polyline />

這里和多邊形類似，也是有points屬性，不同的地方為多邊形的圖形默認(rèn)會(huì)閉合的，而多線條除非自己寫相同坐標(biāo)才會(huì)閉合。