在SVG中导而，使用 path 標(biāo)簽來(lái)定義一個(gè)路徑忱叭。它是一個(gè)單標(biāo)簽隔崎，基本語(yǔ)法為：尖角號(hào) path，斜線尖角號(hào)韵丑。應(yīng)用路徑爵卒，我們可以繪制任意形狀的圖形。
path標(biāo)簽的重要屬性 d撵彻，用來(lái)定義繪制路徑的命令钓株，d 是 draw 的縮寫(xiě)，就是繪制的意思陌僵。
繪制路徑的命令有很多轴合，先看兩個(gè)常用的命令：
M 命令，是 moveto 的縮寫(xiě)碗短，定義繪制圖形的起點(diǎn)坐標(biāo)受葛。例如 M 150 0 (大M，空格豪椿，150奔坟，空格，0)搭盾，也可以寫(xiě)成 M150 0 (大M, 150咳秉，空格，0) 鸯隅，表示路徑從屏幕坐標(biāo)的 x 150澜建，y 0 (直接讀) 這個(gè)點(diǎn)開(kāi)始繪制。
L 命令蝌以，是 lineto 的縮寫(xiě)炕舵，用來(lái)繪制一條直線。例如 l 75 200 (讀小l跟畅，空格咽筋，75，空格徊件，200) 奸攻，也可以寫(xiě)成 l75 200 (讀作小l，75虱痕，空格睹耐，200)，表示從上一個(gè)結(jié)束點(diǎn)到 x 75部翘，y 200 (直接讀) 這個(gè)點(diǎn)繪制一條直線硝训。
注意：命令的字母大小寫(xiě)，表示的意義是不同的。大寫(xiě)字母表示絕對(duì)定位窖梁，小寫(xiě)字母表示相對(duì)定位赘风。絕對(duì)定位是相對(duì)于屏幕坐標(biāo)原點(diǎn)的位置，相對(duì)定位是相對(duì)于上一個(gè)繪制點(diǎn)的位置窄绒。
打開(kāi)編輯器贝次，新建一個(gè) path.html 文件，補(bǔ)全基礎(chǔ)代碼彰导，在 body 里添加一個(gè) svg 標(biāo)簽蛔翅，定義屬性 width 等于 400，height 等于 210位谋。
在 svg 里添加 path 標(biāo)簽山析，定義屬性 d，它的值定義為 "M150 0 L75 200 L225 200"掏父。保存文件笋轨。
在瀏覽器中預(yù)覽，一個(gè)具有默認(rèn)黑色的三角形就繪制好了赊淑。
這里你可能會(huì)問(wèn)：用 polygon 繪制多邊形不也可以嗎爵政，為什么用 path 呢？其實(shí)陶缺，path 的繪制能力非常強(qiáng)钾挟，比如繪制一條貝塞爾曲線。
“貝賽爾曲線”是由法國(guó)數(shù)學(xué)家皮埃爾·貝塞爾（Pierre Bézier）發(fā)明的饱岸，由此為計(jì)算機(jī)矢量圖形學(xué)奠定了基礎(chǔ)掺出。
在 path 中，繪制“貝賽爾曲線” 使用 Q 命令苫费。
Q 是 quadratic Bézier curve ([k??rv]) 的縮寫(xiě)汤锨，用來(lái)繪制二次貝塞爾曲線，需要定義控制點(diǎn)和終點(diǎn)的坐標(biāo)百框。例如 q 150 -300 300 0闲礼，表示控制點(diǎn)坐標(biāo)是 x 150，y -300铐维，終點(diǎn)坐標(biāo)是 x 300柬泽，y 0。這個(gè)比較難理解方椎，大家來(lái)看一下二次貝塞爾曲線繪制示意圖聂抢。
回到編輯器钧嘶，為了強(qiáng)化練習(xí)棠众，我們來(lái)繪制一張二次貝塞爾曲線模擬靜態(tài)圖。(此時(shí)會(huì)展示繪制完以后的效果圖)
A為起點(diǎn)，B為控制點(diǎn)闸拿，C為終點(diǎn)空盼。在AB，BC 兩條紅色的線段上新荤，有一條綠色的切線揽趾，藍(lán)色的為繪制的貝塞爾曲線。
我們先來(lái)繪制三個(gè)點(diǎn)苛骨。在上個(gè) svg 結(jié)尾處添加一個(gè) br 標(biāo)簽篱瞎。回車(chē)換行痒芝。
添加一個(gè)新的 svg 標(biāo)簽俐筋，屬性 width 等于 450，height 等于 400严衬。
我首先繪制三個(gè)點(diǎn)澄者。在 svg 標(biāo)簽里添加一個(gè) circle 標(biāo)簽，定義屬性 cx 等于 100请琳，cy 等于 350粱挡，r 等于 3。
復(fù)制兩個(gè) circle俄精，分別改寫(xiě)一下圓心的位置坐標(biāo)询筏。
這里我們能成組的給三個(gè)小圓定義顏色等屬性嗎？可以的嘀倒。
在SVG中屈留，我們可以使用 g 標(biāo)簽把多個(gè)繪圖元素包裹起來(lái)，在 g 標(biāo)簽上定義公共的屬性测蘑。
我們給三個(gè)小圓定義一個(gè)父標(biāo)簽 g灌危，定義屬性 fill，值為 black碳胳。保存勇蝙。
回到瀏覽器，刷新挨约，三個(gè)小圓點(diǎn)做好了味混。
接下來(lái)繪制三個(gè)點(diǎn)的名稱(chēng)。
回到編輯器诫惭，再創(chuàng)建一個(gè) g 標(biāo)簽翁锡，在 g 標(biāo)簽里添加一個(gè) text 標(biāo)簽，填入文本大寫(xiě)字幕 A夕土。給 text 定義屬性 x 等于 100馆衔，y 等于 350瘟判，dx 等于 -30。
復(fù)制兩份 text 標(biāo)簽角溃，修改文本內(nèi)容分別為 B拷获，和 C。再修改一下屬性减细。
最后給 g 定義三個(gè)文本的公共屬性匆瓜，font-size 等于 30，fill 等于 black未蝌，text-anchor 等于 middle驮吱。保存。
回到瀏覽器萧吠，刷新糠馆，三個(gè)點(diǎn)的名稱(chēng)定義好了。
接下來(lái)繪制AB怎憋，BC兩條線段又碌。
回到編輯器，在 svg 里的首行創(chuàng)建一個(gè) path 標(biāo)簽绊袋，定義 d 屬性毕匀，值為 "M 100 350 l 150 -300" (直接讀，注意那個(gè)小 l ) 癌别，定義 stroke 屬性皂岔，值為 red，定義 stroke-width 屬性展姐，值為 3躁垛，fill 屬性，值為 none圾笨。
復(fù)制一個(gè) path教馆，修改一下 d 屬性的值。保存擂达。
回到瀏覽器土铺，刷新，兩條紅色的線段繪制好了板鬓。
接下來(lái)繪制綠色的切線悲敷。
回到編輯器，創(chuàng)建第三個(gè) path 標(biāo)簽俭令，定義 d 屬性后德，值為 "M 175 200 l 150 0" (直接讀，注意那個(gè)小 l ) 抄腔，定義 stroke 屬性瓢湃，值為 green窟赏，定義 stroke-width 屬性，值為 3箱季，fill 屬性，值為 none棍掐。保存藏雏。
回到瀏覽器，刷新作煌，一條綠色的切線繪制好了掘殴。
最后繪制主角兒，貝塞爾曲線粟誓。
回到編輯器奏寨，創(chuàng)建第四個(gè) path 標(biāo)簽，定義 d 屬性鹰服，值為 "M 100 350 q 150 -300 300 0" (直接讀病瞳，注意大M，小 q ) 悲酷，定義 stroke 屬性套菜，值為 blue，定義 stroke-width 屬性设易，值為 5逗柴，fill 屬性，值為 none顿肺。保存戏溺。
回到瀏覽器，刷新屠尊，完整的二次貝塞爾曲線模擬圖就繪制好了旷祸。
返回編輯器，我們可以把輔助的點(diǎn)和線都去掉讼昆，保存肋僧。
回到瀏覽器，刷新控淡，只顯示了第四條 path 路徑嫌吠，貝塞爾曲線！
