svg:
path有d屬性,而d屬性是最牛B的!
<svg width="100%" height="100%">
<path d="M0,0 L240,0 L240,240 L0,240 Z" fill="#fff" stroke="#000" stroke-width="10" transform="translate(5,5)"></path>
</svg>
M = moveto(M X,Y) :將畫筆移動到指定的座標位置
L = lineto(L X,Y) :畫直線到指定的座標位置
H = horizontal lineto(H X):畫水平線到指定的X座標位置
V = vertical lineto(V Y):畫垂直線到指定的Y座標位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY):三次貝賽曲線
S = smooth curveto(S X2,Y2,ENDX,ENDY)
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY):二次貝賽曲線
T = smooth quadratic Belzier curveto(T ENDX,ENDY):映射
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧線
Z = closepath():關閉路徑
- M:畫筆起始位置
- L:畫直線(x,y)座標
- Z:自動閉合
- fill: 填充顏色
- stroke:描邊顏色
- stroke-width:描邊寬度
- transform="translate(x,y)": 加了描邊後需要平移(x=stroke-width/2,
y=stroke-width/2)
例:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g fill="none" stroke="black" stroke-width="6">
<path stroke-linecap="butt" d="M5 20 l215 0" />
<path stroke-linecap="round" d="M5 40 l215 0" />
<path stroke-linecap="square" d="M5 60 l215 0" />
</g>
</svg>
如果是虛線:
<svg width="100%" height="100%">
<path d="M0,40 H240" stroke="#333" stroke-width="10" transform="translate(5,5)" stroke-dasharray="20" stroke-dashoffset="10"></path>
//間隔20像素繪製一次
</svg>
stroke-dasharray:(Number)間隔多少像素繪製一次
stroke-dashoffset:(Number) 每次繪製偏離多少,必須配合stroke-dasharray使用
下一節我講一下path的三次貝塞爾曲線使用方法!