Shulou(Shulou.com)06/03 Report--

This article is to share with you about the introduction and use of graphics in HTML5 SVG, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

Basic shape

SVG provides many basic shapes, and these elements can be used directly, which is much better than canvas. No more nonsense, just look at the example, this is the most direct:

The code is as follows:

The result of this HTML is as follows:

This example draws a lot of shapes: normal rectangle, rounded rectangle, circle, oval, straight line, broken line, polygon, and path. These are all basic graphic elements.

The following are instructions for the use of each shape (only the basic attributes that control the shape and position of the shape, fill and other properties are summarized later).

Rectangle-rect element

This element has six attributes that control position and shape, which are:

X: the x value of the coordinates (user coordinate system) in the upper-left corner of the rectangle.

Y: the y value of the coordinates (user coordinate system) in the upper-left corner of the rectangle.

Width: rectangular width.

Height: height of the rectangle.

Rx: the radius of the fillet along the x-axis when you achieve the fillet effect.

Ry: the radius of the fillet along the y-axis when you achieve the fillet effect.

For example, in the above example, the fillet effect is achieved, and you can also achieve the elliptical corner effect by setting rx,ry to different values.

Circle-circle element

The attributes of this element are simple, mainly defining the center and radius:

R: radius of the circle.

Cx: the center coordinate x value.

Cy: the y value of the center coordinate.

Ellipse-ellipse element

Rx: semi-major axis (x radius).

Ry: semi-minor axis (y radius).

Cx: the center coordinate x value.

Cy: the y value of the center coordinate.

Line-line element

A straight line needs to define a starting point and an end point:

X1: starting point x coordinates.

Y1: starting point y coordinates.

X2: end point x coordinates.

Y2: end point y coordinate.

Broken line-polyline element

The main purpose of a broken line is to define the endpoint of each segment, so you only need a set of points as a parameter:

Points: a series of dots separated by spaces, commas, newline characters, etc. Each point must have two numbers: the x value and the y value. So the following three points (0rem 0), (1p 1) and (2p 2) can be written as: "0 0, 1 1, 2 2".

Polygon-polygon element

This element is one step more than the polyline element, connecting the last point to the first point to form a closed pattern. The parameters are the same.

Points: a series of dots separated by spaces, commas, newline characters, etc. Each point must have two numbers: the x value and the y value. So the following three points (0rem 0), (1p 1) and (2p 2) can be written as: "0 0, 1 1, 2 2".

Path-path element

This is the most universal, the most powerful element of the; with this element you can achieve any other graphics, not only the above basic shapes, but also can achieve complex shapes like Bezier curve; in addition, the use of path can achieve a smooth transition line, although you can also use polyline to achieve this effect, but need to provide a lot of points, and magnified the effect is not good. There is only one parameter that controls the position and shape of this element:

D: a series of drawing instructions and drawing parameters (points) are combined.

Drawing instructions are divided into absolute coordinate instructions and relative coordinate instructions, the two instructions use the same letters, but not the same case, absolute instructions use uppercase letters, coordinates are also absolute coordinates; relative instructions use the corresponding lowercase letters, the coordinates of the point represent the offset.

Absolute coordinate drawing instruction

The parameters of this set of instructions represent absolute coordinates. Assuming that the current brush is in a position of (x0 ~ Y0), the following absolute coordinate instructions represent the following:

The instruction parameter instructs Mx y to move the brush to the point (xPowery) Lx y brush from the current point draw line segment to point (xPowery) Hx brush from the current point draw horizontal line segment to point (xPowery0) Vy brush draw vertical line segment from current point to point (x0priy) Arx ry x-axis-rotation large-arc-flag sweep-flag x y brush draw an arc from the current point to point (xpeny) Cx1 y1, x2y2 The x y brush draws a cubic Bezier curve from the current point to the point (xMago y) Sx2 y2, x y special version of the cubic Bezier curve (omitting the first control point) Qx1 y1, x y draws the quadratic Bezier curve to the point (xpencil y) Tx y special version of the quadratic Bezier curve (omitting control points) Z draws a closed graph without parameters. If the d attribute does not specify the Z command, the segment is drawn instead of enclosing the drawing.

Moving brush instruction M, drawing straight line instruction: LPowerHPowerV, closing instruction Z are relatively simple; let's focus on a few instructions for drawing curves.

Arc drawing instruction: A rx ry x-axis-rotation large-arc-flag sweep-flag x y

Connecting two points with an arc is complicated and there are many cases, so this command has seven parameters that control each attribute of the curve. Let's explain the meaning of the numerical value:

Rx,ry is the semi-major axis and semi-minor axis length of the arc.

X-axis-rotation is the angle between the x-axis of this arc and the horizontal direction, that is, the counterclockwise rotation angle of the x-axis, and the negative number represents the angle of clockwise rotation.

A large-arc-flag of 1 represents a large-angle arc and 0 represents a small-angle arc.

A sweep-flag of 1 represents a clockwise arc around the center from the start to the end, and 0 represents a counterclockwise direction.

XBI y is the arc terminal coordinate.

Not to mention the first two parameters and the last two parameters, it is very simple; let's talk about the three parameters in the middle:

X-axis-rotation represents the angle of rotation and experience the difference of arcs in the following example:

The code is as follows:

The HTML above draws the following figure:

It can be seen from the figure that the different rotation parameters of the ellipse lead to different directions of the drawn arc, of course, this parameter has no effect on the positive circle.

Large-arc-flag and sweep-flag control the size and direction of the arc, and experience the difference in the arc in the following example:

The code is as follows:

This HTML draws the following pictures:

As can be seen from the above, these parameters are actually the only parameters needed to determine an arc. You can also see that the arcs in SVG are a little more complex than those in canvas.

Instructions for drawing cubic Bezier curves: C x1 y 1, x 2 y 2, x y

The cubic Bezier curve has two control points, namely (x1) and (x2), and the last (x) represents the end of the curve. Experience the following example:

The code is as follows:

This HTML snippet draws the following figure:

As we can see from above, the control points control the radians of the curve.

Special version of cubic Bezier curve: s x2y2, x y

In many cases, in order to draw a smooth curve, you need to draw the curve continuously many times. At this time, for a smooth transition, the control point of the second curve is often the mapping point of the first curve control point on the other side of the curve. This simplified version can be used at this time. It should be noted here that if there is no other S instruction or C instruction in front of the S instruction, the two control points will be considered to be the same and degenerate into a quadratic Bezier curve; if the S instruction is used after another S instruction or C instruction, the first control point of the latter S instruction will be set to a mapping point of the second control point of the previous curve by default.

The code is as follows:

The HTML snippet is drawn as follows:

The S instruction above has only a second control point, and the first control point uses a mapping point of the second control point of the previous curve instruction.

Instructions for drawing quadratic Bezier curve: Q x1y1, x y, T x y (special version of quadratic Bezier curve)

A quadratic Bezier curve has only one control point (x1 ~ Y1), usually as shown in the following figure:

If the curve is drawn continuously, the simplified version T can also be used. Similarly, only when there is a Q or T instruction in front of T, the control point of the subsequent T instruction will be set to the mapping point of the control point of the previous curve by default. Experience:

The code is as follows:

The HTML snippet is drawn as follows:

Similarly, if the T instruction is not preceded by a Q or T instruction, it is considered that there are no control points and a straight line is drawn.

Relative coordinate drawing instruction

The letters of the absolute coordinate drawing instructions are the same, except that they are all lowercase. Among the parameters of this set of instructions, the parameters involving coordinates represent relative coordinates, which means that the parameters represent the offset from the current point to the target point, the positive number represents the positive offset to the axis, and the negative number represents the reverse offset. For Z instructions, however, there is no difference between case and case.

It should be noted here that absolute coordinate instructions and relative coordinate instructions can be mixed. Sometimes mixed use can lead to more flexible painting.

SVG path drawing considerations:

When drawing graphics with holes, it should be noted that the outer edges need to be drawn counterclockwise, and the edges of the holes inside must be clockwise. Only in this way can the filling effect of the drawing be correct.

The above is the introduction and use of graphics in HTML5 SVG. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.