Introduction to HTML5 SVG 2D 2-Drawing (basic shape)

Comments: SVG provides many basic shapes. These elements can be used directly, which is much better than canvas. I will not talk about them here. If you are interested, you can understand them, this article may be helpful for drawing SVG images.

Basic shape
SVG provides many basic shapes that can be directly used by these elements, which is much better than canvas. Let's just look at the example. This is the most direct:

The Code is as follows:
<Svg width = "200" height = "250">
<Rect x = "10" y = "10" width = "30" height = "30" stroke = "black" fill = "transparent" stroke-width = "5 "/>
<Rect x = "60" y = "10" rx = "10" ry = "10" width = "30" height = "30" stroke = "black" fill =" transparent "stroke-width =" 5 "/>
<Circle cx = "25" cy = "75" r = "20" stroke = "red" fill = "transparent" stroke-width = "5"/>
<Ellipse cx = "75" cy = "75" rx = "20" ry = "5" stroke = "red" fill = "transparent" stroke-width = "5 "/>
<Line x1 = "10" x2 = "50" y1 = "110" y2 = "150" stroke = "orange" fill = "transparent" stroke-width = "5 "/>
<Polyline points = "60 110 65 120 70 115 75 130 80 125 140 90 135 95 150 100 145"
Stroke = "orange" fill = "transparent" stroke-width = "5"/>
<Polygon points = "50 160 55 180 70 180 60 190 65 205 50 195 35 205 190 30 180 45 180"
Stroke = "green" fill = "transparent" stroke-width = "5"/>
<Path d = "M20, 230 Q40, 205 50,230 T90, 230" fill = "none" stroke = "blue" stroke-width = "5"/>
</Svg>

The result of this section of HTML is as follows:

 

This example draws many shapes: normal rectangle, rectangle with rounded corner, circle, elliptical, straight line, line, polygon, and path. These are basic graphic elements. Although there are many ways to draw a graph, such as using rect or path, we shouldKeep SVG content as short as possible and easy to read.

The following describes how to use each shape (this section only describes the basic attributes for controlling the shape and position of the image, and adds attributes such as fill to the following summary ).

Rectangle-rect Element
This element has six attributes that control the position and shape, respectively:
X: The x value of the coordinate (user coordinate system) in the upper left corner of the rectangle.
Y: y value of the coordinate system (user coordinate system) in the upper left corner of the rectangle.
Width: the width of the rectangle.
Height: the height of the rectangle.
Rx: the radius of the rounded corner along the X axis.
Ry: the radius of the rounded corner along the Y axis.
For example, in the preceding example, the corner effect is achieved. You can also set rx and ry to different values to achieve the elliptical Corner Effect.

Circle-circle Element
The attribute of this element is very simple. It mainly defines the center and radius:
R: the radius of the circle.
Cx: The x value of the center coordinate.
Cy: y value of the center coordinate.

Elliptical-ellipse Element
This is a more general circular element. You can control the lengths of the semi-long axis and the semi-short axis respectively to realize different ovans. It is easy to think that when the two semi-axes are equal, it is a positive circle.
Rx: semi-long axis (x radius ).
Ry: semi-short axis (y radius ).
Cx: The x value of the center coordinate.
Cy: y value of the center coordinate.

Line-line Element
You can define the start and end points for a straight line:

X1: x coordinate of the start point.
Y1: y coordinate of the start point.
X2: x coordinate of the terminal.
Y2: y coordinate of the terminal.

Line-polyline Element
A broken line defines the endpoint of each line segment. Therefore, you only need a set of points as the parameter:

Points: A series of vertices separated by spaces, commas, and line breaks. Each vertex must have two numbers: x and y. So the following three points (), () and () can be written as: "0 0, 1 1, 2 2 ".

Polygon Element
This element is more than a polyline element. It connects the last vertex and the first vertex to form a closed image. The parameters are the same.
Points: A series of vertices separated by spaces, commas, and line breaks. Each vertex must have two numbers: x and y. So the following three points (), () and () can be written as: "0 0, 1 1, 2 2 ".

Path-path element
This is the most common and powerful element. With this element, You can implement any other graphics, including not only the basic shapes above, but also the complex shapes like the besell curve; in addition, the path can be used to achieve smooth transition line segments. Although polyline can also be used to achieve this effect, many points need to be provided and the amplification effect is not good. This element has only one parameter for controlling the position and shape:
D: Combine a series of drawing commands and drawing parameters (points.

There are two types of draw commands: absolute and relative coordinate commands. The two commands use the same letter, that is, the case is different. The absolute commands use uppercase letters, and the coordinates are also absolute coordinates; the corresponding lowercase letters are used for the commands. The coordinates of the points indicate the offsets.

Absolute coordinate drawing command
The parameters of this set of commands represent absolute coordinates. If the current position of the paint brush is (x0, y0), the following absolute coordinate commands represent the following meanings:

Command	Parameters	Description
M	X y	Move the paint brush to a point (x, y)
L	X y	The paint brush draws a line segment from the current point to the point (x, y)
H	X	The paint brush draws horizontal line segments from the current point to the point (x, y0)
V	Y	The paint brush draws a vertical line segment from the current point to the point (x0, y)
A	Rx ry x-axis-rotation large-arc-flag sweep-flag x y	The paint brush draws an arc to point (x, y) from the current point)
C	X1 y1, x2 y2, x y	The paint brush draws a three-time betel curve from the current point to the point (x, y)
S	X2 y2, x y	Special version of the Three-bysel curve (the first control point is omitted)
Q	X1 y1, x y	Draw a second besell curve to point (x, y)
T	X y	Secondary besell curves of Special versions (Omitted Control Points)
Z	No Parameter	Draw a closed graph. If the Z command is not specified for the d attribute, draw a line segment instead of a closed graph.

Move the paint brush command M and draw a straight line command: L, H, V, and close command Z are relatively simple. The following describes several instructions for drawing a curve.

Draw an arc command: A rx ry x-axis-rotation large-arc-flag sweep-flag x y
It is complicated to connect two points with an arc. Therefore, this command has seven parameters to control the attributes of the curve respectively. The following explains the meaning of the value:
Rx, ry is the length of the semi-axis and semi-short axis of the arc.
X-axis-rotation is the angle between the x-axis and the horizontal direction of the arc, that is, the clockwise rotation angle of the x-axis. A negative number indicates the clockwise rotation angle.
1 represents a large angle arc, 0 represents a small angle arc.
When the value of sweep-flag is 1, the arc line from the start point to the end point is clockwise, and the value of 0 indicates the clockwise direction.
X and y are arc terminal coordinates.
The first two parameters and the last two parameters are not described much. It is very simple. The following describes the three parameters in the middle:
X-axis-rotation indicates the rotation angle. The arc in the following example is different:

The Code is as follows:
<Svg width = "320px" height = "320px">
<Path d = "M10 315
L 110 215
A 30 50 0 0 1 162.55 162.45
L 172.55 152.45
A 30 50-45 0 1 215.1 109.9
L 315 10 "stroke =" black "fill =" green "stroke-width =" 2 "fill-opacity =" 0.5 "/>
</Svg>

The above HTML draws the following figure:

 
We can see that the direction of the drawn arc varies depending on the elliptical Rotation Parameter. Of course, this parameter does not affect the positive circle.

Large-arc-flag and sweep-flag control the arc size and direction:

The Code is as follows:
<Svg width = "325px" height = "325px">
<Path d = "M80 80
A 45 45, 0, 0, 0,125 125
L 125 80 Z "fill =" green "/>
<Path d = "M230 80
A 45 45, 0, 1, 0,275 125
L 275 80 Z "fill =" red "/>
<Path d = "M80 230"
A 45 45, 0, 0, 1,125 275
L 125 230 Z "fill =" purple "/>
<Path d = "M230 230
A 45 45, 0, 1, 1,275 275
L 275 230 Z "fill =" blue "/>
</Svg>

This HTML plot the following figures:

 
We can see from the above that these parameters are actually the only parameters required to determine an arc. The arc in SVG is more complex than that in canvas.

Command for drawing a cubic besell curve: C x1 y1, x2 y2, x y

There are two control points for the cubic besell curve, namely (x1, y1) and (x2, y2). The last side (x, y) represents the end point of the curve. See the following example:

The Code is as follows:
<Svg width = "pixel PX" height = "160px">
<Path d = "M10 10 C 20 20, 40 20, 50 10" stroke = "black" fill = "transparent"/>
<Path d = "M70 10 C 70 20,120 20,120 10" stroke = "black" fill = "transparent"/>
<Path d = "M130 10 C 120 20,180 20,170 10" stroke = "black" fill = "transparent"/>
<Path d = "M10 60 C 20 80, 40 80, 50 60" stroke = "black" fill = "transparent"/>
<Path d = "M70 60 C 70 80,110 80,110 60" stroke = "black" fill = "transparent"/>
<Path d = "M130 60 C 120 80,180 80,170 60" stroke = "black" fill = "transparent"/>
<Path d = "M10 110 C 20 140, 40 140, 50 110" stroke = "black" fill = "transparent"/>
<Path d = "M70 110 C 70 140,110 140,110 110" stroke = "black" fill = "transparent"/>
<Path d = "M130 110 C 120 140,180 140,170 110" stroke = "black" fill = "transparent"/>
</Svg>

This HTML clip draws the following image:

We can see from the above that the control point controls the curve radians.

Three-Step besell curve of a special version: S x2 y2, x y

Many times, to draw a smooth curve, you need to draw the curve multiple times in a row. In this case, for smooth transition, the control point of the second curve is often the ing point of the first Curve Control Point on the other side of the curve. This simplified version can be used at this time. Note that if there are no other S or C commands in front of the S command, the two control points will be considered the same at this time, and the two control points will degrade to the form of a secondary besell curve; if the S command is used after another S command or C command, at this time, the first control point of the S command is set to a ing point of the second control point of the curve above by default:

The Code is as follows:
<Svg width = "pixel PX" height = "160px">
<Path d = "M10 80 C 40 10, 65 10, 95 80 S 150 150,180 80" stroke = "black" fill = "transparent"/>
</Svg>

This HTML clip is drawn as follows:

The S command above only has the second control point. The first control point uses a ing point of the second control point of the preceding curve command.

Command for drawing a quadratic besell curve: Q x1 y1, x y, T x y (second besell curve of a special version)
The secondary bésel curve has only one control point (x1, y1), as shown in the following figure:

For continuous curve drawing, you can also use simplified version T. Similarly, when only the Q or T command is prior to T, the control point of the T command is set to the ing point of the control point of the curve by default:

The Code is as follows:
<Svg width = "pixel PX" height = "160px">
<Path d = "M10 80 Q 52.5 10, 95 80 T 180 80" stroke = "black" fill = "transparent"/>
</Svg>

This HTML clip is drawn as follows:

 
Similarly, if the T command is not followed by the Q or T command, no control point is considered and a straight line is drawn.

Relative Coordinate drawing command
It is the same as the letter of the absolute coordinate drawing command, except that all letters are in lowercase. In this set of commands, the parameters involving coordinates represent the relative coordinates, that is, the parameter represents the offset from the current point to the target point, and the positive number represents the forward offset to the axis, A negative number indicates a reverse offset. However, for Z commands, the Case sensitivity is the same.

Note,The absolute and relative coordinate commands can be used in combination.. Sometimes hybrid use can bring more flexible painting.

Notes for drawing SVG path:
When drawing a graph with holes, note that the outer side must be drawn in a clockwise order, and the sides of the holes must be in a clockwise order. Only in this way will the graphic filling effect be correct.

Practical reference:
Script Index: http://msdn.microsoft.com/zh-cn/library/ff971910 (v = vs.85). aspx
Development Center: https://developer.mozilla.org/en/SVG
Hot reference: http://www.chinasvg.com/
Official documents: http://www.w3.org/TR/SVG11/