Projects show

loadding

svgLoadding

Smiling face jelly

Smiling face jelly

Emoji menu box

Emoji menu box

SVG park

SVG park

Card content flipping toggle animation

Card content flipping toggle animation

Path Path description

SVG is introduced

The PATH element is the most powerful of the SVG base shapes, and it can create not only other base shapes, but many more. You can use the path element to draw rectangles (rectangular or rounded rectangles), circles, ellipses, folds, polygons, and other shapes, such as Bezier curves, cubic curves, and so on.

The shape of the path element is defined by attribute D, whose value is a sequence of commands + arguments.

Each command is represented by a key letter, for example, the letter “M” for a “Move to” command, and when the parser reads the command, it knows that you intend to Move to a certain point. Following the command letter are the x and y coordinates of the point to which you need to move. For example, the command to move to the point (10,10) should be written as “M 10,10”. When this character is finished, the parser reads the next command. Each command can be represented in two ways, one in capital letters, indicating absolute positioning. The other is to use lowercase letters to indicate the use of relative positioning

Because attribute D uses the user coordinate system, there is no need to specify units

SVG’s command

The following commands can be used for path data:

M = moveto

L = lineto H = horizontal lineto V = vertical lineto C = Curveto S = smooth curveto Q = quadratic Bezier curve T = Smooth quadratic Bezier curveto A = Slabs Arc Z = Closepath

Note: All commands above allow lowercase letters. Upper case indicates absolute location, lower case indicates relative location.

Straight line command

As the name suggests, the line command is to draw a straight line between two points. The first is the “Move to” command, M, which takes two parameters, the x and y coordinates of the point to be moved to. After using the M command to move the brush, only the brush is moved, but no line is drawn between the two points. So the M command often appears at the beginning of a path to indicate where to start drawing.

The L command will draw a line segment between the current position and the new position (the point in front of L where the brush is). H draws parallel lines V draws vertical lines Z Draws a line from the current point to the beginning of the path

Example code and effect:

Principle analysis: move the brush to (10,10), start from there, move 80 pixels to the right to form a horizontal line, then move 80 pixels down, then 80 pixels to the left, and finally return to the starting point.

Curve command

There are three commands for drawing smooth curves, two for drawing Bezier curves and one for drawing arcs, or parts of circles.

In the path element, there are only two kinds of Bezier curves: cubic Bezier curves C and quadratic Bezier curves Q.

Cubic Bezier curves

The cubic Bezier curve needs to define one point and two control points, so using the C command to create the cubic Bezier curve, three sets of coordinate parameters need to be set: C x1 y1, x2 y2, x y (or C dx1 dy1, dx2 dy2, dx dy), the last coordinate (x,y) represents the end point of the curve, the other two coordinates are the control points, (x1,y1) is the control point of the starting point, (x2,y2) is the control point of the end point.

<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
    <circle cx="130" cy="110" r="2" fill="red"/>
    <circle cx="120" cy="140" r="2" fill="red"/>
    <line x1="130" y1="110" x2="120" y2="140" style="Stroke: RGB (0, 255); stroke-width:2"/>
    <circle cx="180" cy="140" r="2" fill="red"/>
    <circle cx="170" cy="110" r="2" fill="red"/>
    <line x1="180" y1="140" x2="170" y2="110" style="Stroke: RGB (0, 255); stroke-width:2"/>
</svg>
Copy the code

Principle analysis: the curve extends from the starting point to the first control point, bends gradually, and then ends in the direction of the second control point to the end point.

Short for bezier curve command S

The control points on one side of a point are the symmetry of the control points on the other side (to keep the slope constant). We can use a shorthand bezier curve command S: The command S x2 y2, x y (or S dx2 dy2, dx dy), S can be used to create Bessel curves identical to those before, but if the command S follows a command C or another command S, its first control point is assumed to be the symmetric point of the previous control point. If the S command is used alone, without C or another S command preceding it, its two control points are assumed to be the same point.

<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
    <circle cx="10" cy="80" r="2" fill="red"/>
    <circle cx="40" cy="10" r="2" fill="red"/>
    <line x1="10" y1="80" x2="40" y2="10" style="Stroke: RGB (0, 255); stroke-width:1"/>

    <circle cx="65" cy="10" r="2" fill="red"/>
    <circle cx="95" cy="80" r="2" fill="red"/>
    <line x1="65" y1="10" x2="95" y2="80" style="Stroke: RGB (0, 255); stroke-width:1"/>

    <circle cx="125" cy="150" r="2" fill="blue"/>
    <circle cx="180" cy="80" r="2" fill="red"/>
    <circle cx="150" cy="150" r="2" fill="red"/>
    <line x1="95" y1="80" x2="125" y2="150" style="stroke:blue; stroke-width:1"/>
    <line x1="180" y1="80" x2="150" y2="150" style="Stroke: RGB (0, 255); stroke-width:1"/>
</svg>
Copy the code

Quadratic Bessel curve

Quadratic Bezier curve Q is simpler than cubic Bezier curve, requiring only one control point to determine the slope of the curve at the beginning and end. Two sets of parameters are required, control points and endpoint coordinates. Q command: Q x1 y1, x y (or Q dx1 dy1, dx dy)

<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
     <! --Points-->
    <circle cx="10" cy="80" r="2" fill="red"/>
    <circle cx="95" cy="10" r="2" fill="red"/>
    <circle cx="180" cy="80" r="2" fill="red"/>
    <line x1="10" y1="80" x2="95" y2="10" style="Stroke: RGB (0, 255); stroke-width:1"/>
    <line x1="95" y1="10" x2="180" y2="80" style="Stroke: RGB (0, 255); stroke-width:1"/>
</svg>  
Copy the code

Short for bezier curve command T

Just as the cubic Bezier curve has an S command, the quadratic Bezier curve has an almost identical T command, which extends the quadratic Bezier curve with shorter parameters. T x y (or T dx dy), the shortcut command T will infer a new control point from the previous control point. This means that after your first control point, you can create a fairly complex curve by just defining the end point. Note that the T command must be preceded by either a Q command or another T command to achieve this effect. If T is used alone, then the control point will be thought of as the same point as the end point, so a straight line will be drawn.

<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>

    <circle cx="10" cy="80" r="2" fill="red"/>
    <circle cx="52.5" cy="10" r="2" fill="red"/>
    <line x1="10" y1="80" x2="52.5" y2="10" style="Stroke: RGB (0, 255); stroke-width:1"/>

    <circle cx="95" cy="80" r="2" fill="red"/>
    <line x1="95" y1="80" x2="52.5" y2="10" style="Stroke: RGB (0, 255); stroke-width:1"/>

    <circle cx="180" cy="80" r="2" fill="blue"/>
    <circle cx="137.5" cy="150" r="2" fill="blue"/>
    <line x1="95" y1="80" x2="137.5" y2="150" style="Stroke: RGB (0,0,255); stroke-width:1"/>
    <line x1="137.5" y1="150" x2="180" y2="80" style="Stroke: RGB (0,0,255); stroke-width:1"/>
</svg>
Copy the code

arc

Parameters of the A command:

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

The first two parameters of arc command A are X-axis radius and Y-axis radius respectively. The third parameter of arc command A represents the rotation of arc, large-Arc-flag (Angle size) and sweep-flag (arc direction). Large-arc-flag determines whether the arc is greater than or less than 180 degrees. 0 represents a small angular arc and 1 represents a large angular arc. Sweep-flag indicates the direction of the arc, with 0 indicating that the arc is drawn counterclockwise from the beginning to the end and 1 indicating that the arc is drawn clockwise from the beginning to the end.

<svg width="320px" height="320px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45l 172.55 152.45a 30 50-45 0 1 215.1 109.9l 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
</svg>
Copy the code

Principle analysis:

As the legend shows, there is a diagonal line on the canvas with two elliptic arcs cut diagonally in the middle (x radius = 30, y radius = 50). The x-axis-rotation of the first ellipse is 0, so the ellipse that the arc is in is positive. In the second ellipse, the X-axis-rotation is set to -45, so this is an ellipse that has been rotated 45 degrees, with the short axis as the dividing line, forming two symmetrical arcs.