首先看一下w3c的說(shuō)法
對(duì)于 M L H V Z 比較容易理解，但對(duì)于 C S Q T A 并沒(méi)有很詳細(xì)的解析，初次見(jiàn)面一臉悶逼纬霞。下面借別人總結(jié)的，再來(lái)介紹一遍驱显∈撸可參考此文
M = moveto
Mx,y 移動(dòng)到指定坐標(biāo)，xy分別為x軸和y軸的坐標(biāo)點(diǎn)埃疫，類(lèi)似畫(huà)筆的起點(diǎn)伏恐。
path中的起點(diǎn)，必須存在（文檔中雖然沒(méi)有提到過(guò)熔恢，但是path的其他命令都需要依賴(lài)一個(gè)初始位置脐湾，而實(shí)際操作過(guò)程中也沒(méi)有需要到可以不使用M的情況，后面發(fā)現(xiàn)有例外我再過(guò)來(lái)補(bǔ)充叙淌。L = lineto
Lx,y 在初始位置（M 畫(huà)的起點(diǎn)）和xy確定的坐標(biāo)畫(huà)一條線秤掌。
兩點(diǎn)一線愁铺，直線，繪圖中很常見(jiàn)的方式闻鉴。H = horizontal lineto
Hx 沿著x軸移動(dòng)一段位置
V = vertical lineto
Vy 沿著y軸移動(dòng)一段位置
C = curveto
Cx1,y1 x2,y2 x,y 三次貝塞爾曲線
當(dāng)前點(diǎn)為起點(diǎn)茵乱，xy為終點(diǎn)，起點(diǎn)和x1y1控制曲線起始的斜率孟岛，終點(diǎn)和x2y2控制結(jié)束的斜率瓶竭。S = smooth curveto
Sx2,y2 x,y 簡(jiǎn)化的貝塞爾曲線
1.如果S命令跟在一個(gè)C命令或者另一個(gè)S命令的后面，它的第一個(gè)控制點(diǎn)渠羞，就會(huì)被假設(shè)成前一個(gè)控制點(diǎn)的對(duì)稱(chēng)點(diǎn)斤贰。
2.如果S命令單獨(dú)使用，前面沒(méi)有C命令或者另一個(gè)S命令次询，那么它的兩個(gè)控制點(diǎn)就會(huì)被假設(shè)為同一個(gè)點(diǎn)荧恍。
Q = quadratic Bézier curve
Qx1,y1 x,y 二次貝塞爾曲線Q
只需要一個(gè)控制點(diǎn)，用來(lái)確定起點(diǎn)和終點(diǎn)的曲線斜率屯吊。因此它需要兩組參數(shù)送巡，控制點(diǎn)和終點(diǎn)坐標(biāo)。T = smooth quadratic Bézier curveto
Tx,y Q命令的簡(jiǎn)寫(xiě)命令盒卸。
與S命令相似骗爆，T也會(huì)通過(guò)前一個(gè)控制點(diǎn)，推斷出一個(gè)新的控制點(diǎn)蔽介。
1.T命令前面必須是一個(gè)Q命令摘投，或者是另一個(gè)T命令
2.如果T單獨(dú)使用，那么控制點(diǎn)就會(huì)被認(rèn)為和終點(diǎn)是同一個(gè)點(diǎn)虹蓄，所以畫(huà)出來(lái)的將是一條直線
A = elliptical Arc
A rx,ry x-axis-rotation large-arc-flag sweep-flag x,y
rx 弧的半長(zhǎng)軸長(zhǎng)度
ry 弧的半短軸長(zhǎng)度
x-axis-rotation 是此段弧所在的x軸與水平方向的夾角谷朝，即x軸的逆時(shí)針旋轉(zhuǎn)角度，負(fù)數(shù)代表順時(shí)針旋轉(zhuǎn)角度武花。
large-arc-flag 為1表示大角度弧線圆凰，0表示小角度弧線
sweep-flag 為1表示從起點(diǎn)到終點(diǎn)弧線繞中心順時(shí)針?lè)较颍?表示逆時(shí)針?lè)较颉?br> xy 是終點(diǎn)坐標(biāo)。
Z = closepath
從當(dāng)前位置到起點(diǎn)畫(huà)一條直線閉合体箕。
先看 三次貝塞爾曲線 C / c
直接上代碼
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewPort="0 0 500 500" version="1.1">
<path d="M20,20 h200 c150,0 150,200 0,200 h-200 Z"/>
<path d="M220,20 C370,20 370,220 220,220 Z" stroke="red" stroke-width="2" fill="bule"/>
</svg>
主要代碼
C370,20 370,220 220,220
或
c150,0 150,200 0,200
主要原理看
下面來(lái)個(gè)svg做的logo成品
代碼如下
<div id="nran_div" style="width: 188px;height: 50px;display: inline-block;fill: red;zoom:2;">
<svg id="nran_logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewPort="0 0 188 50" version="1.1">
<path id="nran_N" d="M0,0 v50 h10 v-35 l19,35 h13 v-50 h-10 v35 l-19,-35 Z"/>
<g id="nran_I">
<rect id='nran_I_1' x="52" y="0" width="10" height="10"/>
<rect id='nran_I_2' x="52" y="15" width="10" height="35"/>
</g>
<g id="nran_R">
<path d="M67,0 v10 h10 c8 0,8 12,0 12 h-20 v10 h15 q10,0 10,18 l12,0 q-2,-22 -8,-22 c11 0,11 -28,-6 -28 Z"/>
</g>
<g id="nran_A">
<path id="nran_A_1" d="M120,0 h-6 l-15,50 h12 l9,-37 l9,37 h12 l-15,-50 Z"/>
<use xlink:href="#nran_I_1" x="68" y="40"/>
</g>
<use xlink:href="#nran_N" x="146"/>
</svg>
</div>
也可以轉(zhuǎn)換成base64圖片格式
<div id="nran_img" style="width: 188px;height: 50px;display: inline-block;fill: red;zoom:1;">
<img style="width: 100%;height: 100%;" src="data:image/svg+xml;base64,PHN2ZyBpZD0ibnJhbl9sb2dvIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3UG9ydD0iMCAwIDE4OCA1MCIgdmVyc2lvbj0iMS4xIj4KIAk8cGF0aCBpZD0ibnJhbl9OIiBkPSJNMCwwIGwwLDUwIGwxMCwwIGwwLC0zNSBsMTksMzUgbDEzLDAgbDAsLTUwIGwtMTAsMCBsMCwzNSBsLTE5LC0zNSBaIi8+CiAJPGcgaWQ9Im5yYW5fSSI+CiAgIAk8cmVjdCBpZD0nbnJhbl9JXzEnIHg9IjUyIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiLz4KICAgCTxyZWN0IGlkPSducmFuX0lfMicgeD0iNTIiIHk9IjE1IiB3aWR0aD0iMTAiIGhlaWdodD0iMzUiLz4KIAk8L2c+CiAJPGcgaWQ9Im5yYW5fUiI+CiAJCTxwYXRoIGQ9Ik02NywwIGwwLDEwIGwxMCwwIGM4IDAsOCAxMiwwIDEyIGwtMjAsMCBsMCwxMCBsMTUsMCBxMTAsMCAxMCwxOCBsMTIsMCBxLTIsLTIyIC04LC0yMiBjMTEgMCwxMSAtMjgsLTYgLTI4IFoiLz4KIAk8L2c+CiAJPGcgaWQ9Im5yYW5fQSI+CiAJCTxwYXRoIGlkPSJucmFuX0FfMSIgZD0iTTEyMCwwIGwtNiwwIGwtMTUsNTAgbDEyLDAgbDksLTM3IGw5LDM3IGwxMiwwIGwtMTUsLTUwIFoiLz4KCQk8dXNlIHhsaW5rOmhyZWY9IiNucmFuX0lfMSIgeD0iNjgiIHk9IjQwIi8+CiAJPC9nPgoJPHVzZSB4bGluazpocmVmPSIjbnJhbl9OIiB4PSIxNDYiLz4KPC9zdmc+" alt=""/>
</div>
