摘要：創(chuàng)建開始建議添加一個(gè)空路徑的元素創(chuàng)建一個(gè)俄羅斯方塊一次添加一個(gè)命令，保存查看走向，這樣會(huì)可以方便創(chuàng)建出來第一，我們移動(dòng)到，開始，這個(gè)是圖標(biāo)的開始點(diǎn)。

設(shè)置粗細(xì) 5px 的紅色線條繪制，圖標(biāo)是無填充的

svg {
  stroke: #ff0000;
  stroke-width: 5;
  fill: none;
}

使用 元素創(chuàng)建圖標(biāo)

x1：起點(diǎn)的水平軸坐標(biāo)

y1：起點(diǎn)的豎直軸坐標(biāo)

x2：終點(diǎn)的水平軸坐標(biāo)

y2：終點(diǎn)的豎直軸坐標(biāo)

通過坐標(biāo)（x1，y1）來確定線的起點(diǎn)開始，通過（x2,y2）來確定直線的終點(diǎn)

讓我們來創(chuàng)建第一條線，長(zhǎng)為50px；起點(diǎn)為x1 = 10，y1 =10，則x2 = 60 ，y2 = 10
就可以看到一根直線平行于x軸

查看瀏覽器你會(huì)看到一條50px的紅色線條
當(dāng)然可以創(chuàng)建多條不一樣的線條

效果如下

元素只有一個(gè)屬性：points；
我們來開始制作一個(gè)類似返回按鈕的箭頭，通過勾股定理來說比較明白些，我們要?jiǎng)?chuàng)建一個(gè)長(zhǎng)度為50px的，那我們開始插入圖標(biāo)就是（40，0），第二個(gè)就是（0，30）轉(zhuǎn)節(jié)點(diǎn)

接下來就是（40，30+30）那就是（40，60）為結(jié)點(diǎn)

同理得：結(jié)合上面的勾股定理可以得出下面效果

如果你不想這樣寫也可以這樣2種寫法寫

使用 有4個(gè)需要提供值的屬性

x：左上角的 x 軸坐標(biāo)值

y：左上角的 y 軸坐標(biāo)值

width：矩形的寬度

height：矩形的高度

注意：你也可以使用屬性 rx 和 ry 來指定矩形的圓角半徑。

我們來創(chuàng)建一個(gè)正方形，左上角有一個(gè)偏移量3px，所以已x=“3”，y=“3”的屬性值，設(shè)置他的邊長(zhǎng)為100px，則width=“100”，height=“100”

效果如下

我們進(jìn)一步學(xué)習(xí)，結(jié)合上面的知識(shí)點(diǎn)創(chuàng)建一個(gè)田字，也可以自己深入研究其他圖標(biāo)

這個(gè)屬性類似上面一個(gè)，也需要4個(gè)屬性，這個(gè)和上面的不一樣的是，它是通過中心點(diǎn)來定位，而不像上面的通過左邊角來定位

cx：中心位置在 x 軸上的坐標(biāo)

cy：中心位置在 y 軸上的坐標(biāo)

rx：沿 x 軸向的半徑，也就是它會(huì)把圖形分割成上下兩部分

ry：沿 y 軸向的半徑，也就是它會(huì)把圖形分割成左右兩部分

現(xiàn)在設(shè)計(jì)一個(gè)100px和100px的圓，所以半徑為40px，則rx = “50” ry=“50”；同時(shí)又想和x，y相切，加上上面有3px偏移量，所以中心點(diǎn)為 53px，則cx =“53” cy=“53”來設(shè)置

這樣可以得到一個(gè)圓啦?。?/p>

進(jìn)一步學(xué)習(xí)
弄一個(gè)奧迪汽車標(biāo)志

元素和 元素幾乎一樣。都是采用點(diǎn)的值來設(shè)置組成一個(gè)圖案；它們不同之處是 折線 不是閉合的而多邊形 是自動(dòng)閉合的

弄一個(gè)五變形的圖案

最靈活的生成 SVG 圖形的方法，但是也是最復(fù)雜的，即 元素
屬性d，d代表data，在這里，你將定義路徑的所有點(diǎn)和線。在這個(gè)屬性里，設(shè)置路徑點(diǎn)和在點(diǎn)之間創(chuàng)建連線的命令是由諸如 M 或 L 這樣的單個(gè)字母來提供的，然后是一組 x 和/或 y 坐標(biāo)

的命令比較多，通常比較常用的是M、L、Z

  M 表示移動(dòng)到（moveto），它用x,y值來確定起點(diǎn)

  L 表示劃線到（lineto）

  Z 表示閉合路徑。

創(chuàng)建開始建議添加一個(gè)空路徑的元素

創(chuàng)建一個(gè)俄羅斯方塊

一次添加一個(gè)命令，保存查看走向，這樣會(huì)可以方便創(chuàng)建出來；

第一，我們移動(dòng)到（20，3）開始，這個(gè)是圖標(biāo)的開始點(diǎn)。需要在屬性d里面添加一個(gè)命令 M 20 3

接著使用L命令在起點(diǎn)平行于x軸畫出一條60px的線段，所以命令為L(zhǎng) 80 3；然后保存看看自己瀏覽器，你會(huì)看到一條直線；

然后用L 80 23 向下畫出一條20px直線垂直于x軸的線；

接著用L 60 23 向左畫出一條直線線，接著跟著 L 60 46

。。。。

最后一步直接用Z，它會(huì)自動(dòng)閉合就出現(xiàn)上面的圖（俄羅斯方塊）

目的定義可復(fù)用的圖形，初始情況下 里面的內(nèi)容是不可見的；

要把一個(gè)圖標(biāo)轉(zhuǎn)為一個(gè)組合，用標(biāo)簽 來包裹它，然后給它一個(gè)id
例如：

獲取在 中定義的復(fù)用對(duì)象并在 SVG 中顯示出來。

注意  標(biāo)簽里面的x,y 是定義到特定的位置，通過href 獲取上面的圖標(biāo)來使用

效果如下

除開上面的組合方法，還有一個(gè)模板定義圖標(biāo)；模板和組合幾乎一模一樣，但是你要額外設(shè)置控制制視口（viewbox）和長(zhǎng)寬比。

如果你想要把我們目前創(chuàng)建的圖標(biāo)設(shè)置為居中，圖標(biāo)轉(zhuǎn)換成模板，然后使它們垂直填充100像素高的空間，并在這個(gè)空間中水平居中里面；

我們要將圖標(biāo)代碼存放 模板中，然后給他們添加一個(gè)ID；同時(shí)添加一個(gè)屬性viewBox，屬性讓我們可以定義每個(gè)模板的可見部分應(yīng)該是什么，前兩個(gè)定義圖標(biāo)的左上角，第三和第四分別定義它的寬度和高度。

通過use調(diào)用

這個(gè)use 提供設(shè)置好寬度和高度為100px 的圖標(biāo)
效果如下

通過設(shè)置

和創(chuàng)建線

創(chuàng)建矩形，實(shí)現(xiàn)田字，創(chuàng)建圓，實(shí)現(xiàn)一個(gè)奧迪標(biāo)志， 創(chuàng)建多邊形實(shí)現(xiàn)五邊形，它門實(shí)現(xiàn)閉合的圖形

任意創(chuàng)建形狀，實(shí)現(xiàn)俄羅斯方塊

組合形狀，通過id標(biāo)識(shí)形狀

使用 元素定義組合和模板

使用 元素來放置你定義的組合和模板。