SVG paths Path

The <path> tag is used to define the path.

The following commands are available for path data:

m = MoveTo (m x, y): Moves the brush to the specified coordinate position
L = LineTo (L x, y): Draws a straight line to the specified coordinate position
H = Horizontal LineTo (h X): Draws a horizontal line to the specified X-coordinate position
v = vertical LineTo (v Y): Draws a vertical line to the specified Y-coordinate position
c = Curveto (c x1,y1,x2,y2,endx,endy): Three-time beta curve
s = Smooth Curveto (s X2,y2,endx,endy)
Q = Quadratic belzier curve (q X,y,endx,endy): Two-time beta curve
t = smooth quadratic belzier curveto (t endx,endy): Map
A = Elliptical arc (a rx,ry,xrotation,flag1,flag2,x,y): Arc
Z = Closepath (): Close path

Comments:

The axes are centered (0,0), the x-axis is horizontal to the right, and the y-axis is horizontally downward.
All instructions are case-sensitive. uppercase Absolute Positioning , reference global coordinate system, lowercase relative positioning , reference parent container coordinate system
The space between the instruction and the data can be omitted.

Example:

1. LHV directive

M start x, start y L (straight) end x, end y H (horizontal line) end x V (vertical) End Y
such as: M 10,20 L 80,50 m 10,20 V m 10,20 H 90

2. a directive

Allow not to be closed. Can be imagined as a section of an ellipse, with a total of seven parameters:

A Rx,ry,xrotation,flag1,flag2,x,y

Rx,ry refers to the half-axis size of the ellipse being located.
Xrotation refers to the x-axis of the ellipse and the horizontal direction of the clockwise angle, you can imagine a horizontal ellipse around the center point clockwise rotation xrotation angle.
The FLAG1 has only two values, 1 represents a large angle arc, and 0 is a small angle arc.
The FLAG2 has only two values, determines the direction from the starting point to the end point, 1 is clockwise, and 0 is counterclockwise.
X, y is the end coordinate.

such as: M 200,250 a 150,30 0 1 0 0,70

Reference:

Http://www.w3school.com.cn/svg/svg_path.asp

Http://www.cnblogs.com/netWild/archive/2010/12/07/1898792.html

SVG paths Path