SVG是XML語言的一種形式,有點相似XHTML,它能夠用來繪製矢量圖形。一個簡單的SVG文檔由<svg>
根元素和基本的形狀元素構成。另外還有一個g元素,它用來把若干個基本形狀編成一個組。 在學習SVG以前要注意一下兩點:html
stroke :設置繪製對象的線條的顏色;svg
stroke-opacity :控制描邊的不透明度;wordpress
stroke-width :定義了描邊的寬度,描邊是以路徑爲中心線繪製的;學習
stroke-linecap :控制邊框終點的形狀;動畫
stroke-linecap屬性的值有三種可能值:spa
butt 用直邊結束線段,它是常規作法,線段邊界90度垂直於描邊的方向、貫穿它的終點;code
square 的效果差很少,可是會稍微超出實際路徑的範圍,超出的大小由stroke-width控制;xml
round表示邊框的終點是圓角,圓角的半徑也是由stroke-width控制的。htm
<svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/> <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/> <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/> </svg>
注:實際上中間是沒有粉色的線的,在此是爲了更好的顯示不一樣的效果。對象
stroke-linejoin:制兩條描邊線段之間,用什麼方式鏈接,有三種可能值;
miter 默認值,表示用方形畫筆在鏈接處造成尖角;
round 表示用圓角鏈接,實現平滑效果;
bevel 鏈接處會造成一個斜接;
<svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20" stroke-linecap="butt" fill="none" stroke-linejoin="miter"/> <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20" stroke-linecap="round" fill="none" stroke-linejoin="round"/> <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20" stroke-linecap="square" fill="none" stroke-linejoin="bevel"/> </svg>
stroke-dasharra:將虛線類型應用在描邊上;
stroke-dasharray屬性的參數,是一組用逗號分割的數字組成的數列。和path不同,這裏的數字必須用逗號分割(空格會被忽略)。每一組數字,第一個用來表示填色區域的長度,第二個用來表示非填色區域的長度。
<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1" style="border:1px solid #ddd"> <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" stroke-linecap="round" stroke-dasharray="5,10,2" fill="none" /> <path d="M 10 75 L 190 75" stroke="red" stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none" /> </svg>
fill-rule :定義如何給圖形重疊的區域上色,有兩種填充規則,更詳細的說明能夠看這裏搞懂SVG/Canvas中nonzero和evenodd填充規則;
nonzero 非零填充
evenodd 奇偶填充
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1" style="border:1px solid #ddd"> <polygon fill-rule="nonzero" stroke="red" points="50,0 21,90 98,35 2,35 79,90" /> </svg> <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1" style="border:1px solid #ddd"> <polygon fill-rule="evenodd" stroke="red" points="50,0 21,90 98,35 2,35 79,90" /> </svg>
stroke-miterlimit :定義什麼狀況下繪製或不繪製邊框鏈接的miter效果;
stroke-dashoffset :定義虛線開始的位置。
<rect x="10" y="10" width="30" height="30"/> <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
<circle cx="25" cy="75" r="20"/>
<ellipse cx="75" cy="75" rx="20" ry="5"/>
<line x1="10" x2="50" y1="110" y2="150"/>
<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
M命令 (move to)
須要兩個參數分別是須要移動到點的x軸和y軸,使用M命令移動畫筆後,只會移動畫筆不畫線,因此畫線還須要另外三個命令L、H、V
M x y (or d dx dy)
L命令 (line to)
須要兩個參數,分別是一個點的x軸和y軸座標,L命令將會在當前位置和新位置(L前面畫筆所在的點)之間畫一條線段
L x y (or l dx dy)
<path d="M10 10 L 90 20 " fill="#f00" stroke="black"/>
H命令(水平繪線)
標明x軸移動到的位置,只在一個軸的方向上移動
H x (or h dx)
<path d="M10 10 H60 L 90 90 " fill="#f00" stroke="black"/>
V命令(垂直繪線)
標明y軸移動到的位置,只在一個軸的方向上移動
V y (or v dy)
<path d="M10 10 V90 L 11 90 " fill="#f00" stroke="black"/>
Z命令 (閉合路徑)
從當前點畫一條直線到路徑的起點,一般被放在路徑的最後
Z (or z)
<path d="M 10 10 h 70 v 80 h -35 Z" fill="#f00" stroke="black"/>
上述路徑是:畫筆移動到(10,10)點,由此開始,向右移動70像素構成一條水平線,而後向下移動80像素,而後向左移動35像素,而後再回到起點。
三次貝塞爾曲線C命令
三次貝塞爾曲線須要定義一個點和兩個控制點,須要設置三組座標參數
C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
這裏的最後一個座標(x,y)表示的是曲線的終點,另外兩個座標是控制點,(x1,y1)是起點的控制點,(x2,y2)是終點的控制點。控制點描述的是曲線起始點的斜率,曲線上各個點的斜率,是從起點斜率到終點斜率的漸變過程,斜率公式爲 tanα = (y2-y1)/(x2-x1)
當tanα>0時,直線與x軸夾角越大,斜率越大;當k<0時,直線與x軸夾角越大,斜率越小。
<path d="M 10 10 C 10 50,90 50 , 90 10" fill="#f00" stroke="black"/>
如上圖所示,第一個控制點沒有斜率,第二個控制點斜率 k = (10-20)/(90-80) = -1,角度爲135°
S命令
S命令能夠用來建立與以前那些曲線同樣的貝塞爾曲線,可是,若是S命令跟在一個C命令或者另外一個S命令的後面,它的第一個控制點,就會被假設成前一個控制點的對稱點。若是S命令單獨使用,前面沒有C命令或者另外一個S命令,那麼它的兩個控制點就會被假設爲同一個點
S x2 y2, x y (or s dx2 dy2, dx dy)
<path d="M10 50 C 30 30 , 30 30, 50 50 S 80 80, 90 50 " fill="#f00" stroke="black"/>
注: S的第一個控制點是C命令的第二個控制點的對稱點;
注:兩個控制點相同
二次貝塞爾曲線Q
只須要一個控制點,用來肯定起點和終點的曲線斜率,須要兩組參數,控制點和終點座標
Q x1 y1, x y (or q dx1 dy1, dx dy)
<path d="M10 50 Q 30 10 , 90 50 " fill="#f00" stroke="black"/>
T命令
T命令,能夠經過更簡短的參數,延長二次貝塞爾曲線。和以前同樣,快捷命令T會經過前一個控制點,推斷出一個新的控制點。這意味着,在你的第一個控制點後面,能夠只定義終點,就建立出一個至關複雜的曲線。須要注意的是,T命令前面必須是一個Q命令,或者是另外一個T命令,才能達到這種效果。若是T單獨使用,那麼控制點就會被認爲和終點是同一個點,因此畫出來的將是一條直線。
T x y (or t dx dy)
<path d="M10 50 Q 30 10 , 50 50 T 90 50" fill="#f00" stroke="black"/>
注:雖然三次貝塞爾曲線擁有更大的自由度,可是兩種曲線能達到的效果老是差很少的。具體使用哪一種曲線,一般取決於需求,以及對曲線對稱性的依賴程度
弧形命令A
基本上,弧形能夠視爲圓形或橢圓形的一部分。假設,已知橢圓形的長軸半徑和短軸半徑,而且已知兩個點(在橢圓上),根據半徑和兩點,能夠畫出兩個橢圓,在每一個橢圓上根據兩點均可以畫出兩種弧形。因此,僅僅根據半徑和兩點,能夠畫出四種弧形。爲了保證建立的弧形惟一,A命令須要用到比較多的參數。
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
<path d="M10 50 A 20 30 45 0 1 60 70" fill="#f00" stroke="black"/>
注:起始點爲(20 30),rx = 20, ry = 30 , x-axis-rotation = 45 , large-arc-flag = 0 (這裏0或1沒什麼區別), sweep-flag = 1,終點爲(60 70);
<path d="M10 50 A 20 30 0 0 0 60 70" fill="#f00" stroke="black"/>
若是你是從Canvas過渡到SVG,那麼弧形會比較難以掌握,但它也是很是強大的。用路徑來繪製完整的圓或者橢圓是比較困難的,由於圓上的任意點均可以是起點同時也是終點,無數種方案能夠選擇,真正的路徑沒法定義。經過繪製連續的路徑段落,也能夠達到近似的效果,但使用真正的circle或者ellipse元素會更容易一些。