7
头图

[SVG] SVG's deadly weapon-path

Blog description

The information involved in the article comes from the Internet and personal summary, which is intended to summarize personal learning and experience. If there is any infringement, please contact me to delete it, thank you!

illustrate

As soon as it was released yesterday, I suddenly saw a friend leave a message, hoping to see more SVG articles. Suddenly a little moved 😂, then continue. (The moving point is relatively low)

The ability of the path element

path element is the most powerful of the basic SVG shapes. It can not only create other basic shapes, but also more other shapes.

For example, rectangles (right-angled rectangles or rounded rectangles), circles, ellipses, polyline shapes, polygons, etc.

What's more important is the ability to draw some curves, such as Bezier curves, quadratic curves, etc.

The shape of the path element is defined by the attribute d, which controls the path drawn by the entire path through the sequence of "commands and coordinates"

The coordinate command of path

Let's take the form of total score first.

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath

Then introduce one by one, mainly divided into straight line commands and curve commands

Line command

There are mainly the following types of line commands:

  • M (moveto): requires two parameters (x-axis and y-axis coordinates, the x-axis and y-axis coordinates of the point to be moved
  • L (lineto): requires two parameters (x-axis and y-axis coordinates), it will draw a line segment between the current position and the latest position (the point where the pen is located in front of L).
  • H (horizontal lineto): a parameter that indicates the position moved to on the x-axis, and draws a horizontal line
  • V (vertical lineto): a parameter that indicates the position moved to on the y-axis, and draws a vertical line
  • Z (closepath): draw a straight line from the current point to the starting point of the path

example:

Draw a square

<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
</svg>

effect:

image-20211111180744092

code analysis:

First define a 100x100 canvas (coordinate system), use the M command to create a starting point at (10, 10), and use the H command to move to the position of the x-axis at 90 in the horizontal direction, and the y-axis will not change, that is, move to (90 , 10), and then move to the position where the y-axis is 90 through the V command, the x-axis remains unchanged, that is, the position with the coordinates (90, 90), and then move to the position where the x-axis is 10 in the horizontal direction through the H command, The y-axis remains unchanged, the current position is (10, 90), and finally the L command is used to draw a straight line between the starting point (10, 10) and the last point (10, 90), then the four sides are drawn.

think?

It can be thought of through the above parameters and examples. In fact, there are several ways to achieve the last step.

<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <!-- 利用Z命令 -->
  <path d="M10 10 H 90 V 90 H 10 Z"/>
  <!-- 利用V命令 -->
  <path d="M10 10 H 90 V 90 H 10 V 10"/>
</svg>

The effect achieved is the same. The Z command is to draw a straight line directly from the current point to the starting point, and V uses the last step in this example to move in the vertical direction, so it can also do it.

The above is the absolute distance , of course, you can also use the relative distance of to draw, using lowercase letters.

<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 10 h 80 v 80 h -80 Z" />
</svg>
Curve command

C (curveto) cubic Bezier curve

Cubic Bezier curve needs to define one point and two control points, which can be created with C command.

(x, y) represents the end point of the curve, (x1, y1) is the control point of the starting point, and (x2, y2) is the control point of the end point. The control point describes the slope of the starting point of the curve, and the slope of each point on the curve is a gradual process from the slope of the starting point to the slope of the ending point.

Command parameters:

C x1 y1, x2 y2, x y 
c dx1 dy1, dx2 dy2, dx dy

Example:

<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
</svg>

Effect:

image-20211111214258768

Code explanation:

Use M to create a starting point (10, 10), and C to create a control point with (50, 10) as the end point, (20, 20) as the start point, and (40, 10) as the end point.

Add auxiliary points to it, see the effect and code

<svg width="200px" height="200px" 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(255,0,0);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(255,0,0);stroke-width:2"/>
</svg>

image-20211111214528381

Principle analysis: Take a look at the figure below. The curve extends along the direction from the starting point to the first control point, gradually bends, and then ends in the direction from the second control point to the end point.

image-20211111214622149

S (smooth curveto) abbreviated cubic Bezier curve

S actually creates a special cubic Bezier curve. Its special place is when the control point on one side of a point is symmetrical with the control point on the other side, that is, the slope remains unchanged.

(x, y) represents the end point of the curve, (x2, y2) is the control point that is both the end point and the start point.

Command parameters:

S x2 y2, x y
s dx2 dy2, dx dy

Example:

First draw a cubic Bézier curve

<svg width="400px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M 10 50 C 40 20, 120 20, 150 50" stroke="black" fill="transparent"/>
</svg>

Effect:

image-20211111220604444

Use the abbreviated cubic Bézier curve behind the cubic Bézier curve, and use the S command to draw an abbreviated cubic Bézier curve.

<svg width="400px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M 10 50 C 40 20, 120 20, 150 50 S 260 80, 290 50" stroke="black" fill="transparent"/>
</svg>

Effect:

It is equivalent to the starting point using the slope of the last cubic Bézier curve, and a mirrored cubic Bézier curve is drawn according to this slope.

image-20211111220528146

Mark the auxiliary points

<svg width="400px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <path d="M 10 50 C 40 20, 120 20, 150 50 S 260 80, 290 50" stroke="black" fill="transparent"/>
    <circle cx="10" cy="50" r="2" fill="red"/>
    <circle cx="40" cy="20" r="2" fill="red"/>
    <line x1="10" y1="50" x2="40" y2="20" style="stroke:rgb(255,0,0);stroke-width:1"/>

    <circle cx="120" cy="20" r="2" fill="red"/>
    <circle cx="150" cy="50" r="2" fill="red"/>
    <line x1="120" y1="20" x2="150" y2="50" style="stroke:rgb(255,0,0);stroke-width:1"/>

    <circle cx="180" cy="80" r="2" fill="blue"/>
    <circle cx="180" cy="80" r="2" fill="red"/>
    <circle cx="260" cy="80" r="2" fill="red"/>
    <line x1="150" y1="50" x2="180" y2="80" style="stroke:blue;stroke-width:1"/>
    <line x1="290" y1="50" x2="260" y2="80" style="stroke:rgb(255,0,0);stroke-width:1"/>
</svg>

Effect:

image-20211111223144605

The point connected by the blue line is actually "borrowed" from the upper one.

Note: If the S command follows a C command or another S command, its first control point will be assumed to be the symmetry point of the previous control point. If the S command is used alone, and there is no C command or another S command in front, then its two control points will be assumed to be the same point.

Q (quadratic Bézier curve)

The quadratic Bezier curve Q requires only one control point to determine the slope of the curve at the start and end points. So it needs two sets of parameters, control point and end point coordinates.

Q x1 y1, x y
q dx1 dy1, dx dy

Example:

<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M 10 80 Q 95 20 180 80" stroke="black" fill="transparent"/>
</svg>  

Effect:

image-20211111221937262

Compared with the cubic Bezier curve, it has only one control point, that is, one point controls the start and end points at the same time, and the auxiliary points are marked

<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M 10 80 Q 95 20 180 80" stroke="black" fill="transparent"/>
    <circle cx="10" cy="80" r="2" fill="red"/>
    <circle cx="95" cy="20" r="2" fill="red"/>
    <circle cx="180" cy="80" r="2" fill="red"/>
    <line x1="10" y1="80" x2="95" y2="20" style="stroke:rgb(255,0,0);stroke-width:1"/>
    <line x1="95" y1="20" x2="180" y2="80" style="stroke:rgb(255,0,0);stroke-width:1"/>
</svg>  

Effect:

image-20211111222246567

T (smooth quadratic Bézier curveto) abbreviated quadratic Bézier curve

The abbreviated quadratic Bezier curve T requires only one end point.

T x y
t dx dy

Example:

<svg width="400px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 80 Q 50 10, 90 80 T 170 80" stroke="black" fill="transparent"/>
</svg>

Effect:

image-20211111223929914

Add auxiliary lines and points

<svg width="400px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 80 Q 50 10, 90 80 T 170 80" stroke="black" fill="transparent"/>

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

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

    <circle cx="170" cy="80" r="2" fill="blue"/>
    <circle cx="130" cy="150" r="2" fill="blue"/>
    <line x1="90" y1="80" x2="130" y2="150" style="stroke:rgb(0,0,255);stroke-width:1"/>
    <line x1="130" y1="150" x2="170" y2="80" style="stroke:rgb(0,0,255);stroke-width:1"/>
</svg>

Effect:

image-20211111224320542

Note: The T command must be preceded by a Q command or another T command to achieve this effect. If T is used alone, the control point will be regarded as the same point as the end point, so the drawn line will be a straight line.

A (elliptical Arc)

The A command is used to draw arcs.

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

Parameter Description

  • The first two parameters rx and ry of the arc command A are the x-axis radius and the y-axis radius, respectively.
  • The third parameter of the arc command A indicates the rotation of the arc.
  • The large-arc-flag determines whether the arc is greater than or less than 180 degrees, 0 represents a small angle arc, and 1 represents a large angle arc.
  • Sweep-flag indicates the direction of the arc, 0 indicates that the arc is drawn counterclockwise from the start point to the end point, and 1 indicates that the arc is drawn clockwise from the start point to the end point.
  • x: End point x coordinate.
  • y: the y coordinate of the end point.

Example:

<svg width="400px" 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.45
           L 172.55 152.45
           A 30 50 -45 0 1 215.1 109.9
           L 315 10" stroke="black" fill="red" stroke-width="2" fill-opacity="0.5"/>
</svg>

Effect:

image-20211111230425272

Code analysis:

There is a diagonal line on the canvas, and two elliptical arcs are cut diagonally in the middle (x radius = 30, y radius = 50).

The x-axis-rotation of the first ellipse arc is 0, so the ellipse where the arc is located is upright (not inclined).

In the second ellipse arc, x-axis-rotation is set to -45, so this is an ellipse rotated 45 degrees, and the minor axis is used as the dividing line to form two symmetrical arcs.

Summarize

Learned the straight line command, especially the curve command which is more difficult to understand.

There are three commands for drawing a smooth curve, two of which are used to draw a Bezier curve, and the other is used to draw an arc or part of a circle.
In the path element, there are only two kinds of Bezier curves: cubic Bezier curve C and quadratic Bezier curve Q.

Here also pay attention to the premise of the use of the abbreviated Bezier curve. The most difficult part is of course the arc.

Of course, seeing this, some friends may have questions, is it necessary to learn this complicated SVG drawing method? Regarding this question, in fact, the purpose of writing this article is not to let you write SVG by hand, but to understand the drawing method of SVG. Most of SVG is produced by some vector graphics tools, but you have not found it carefully, some of the operations above Isn’t it just the scene where we use AI and other tools to draw?

Learning is at the foot, and so is accumulation.

thanks

Universal network

path-SVG|MDN

And the hardworking self, personal blog , GitHub test , GitHub

Public Account-Guizimo, Mini Program-Xiaogui Blog


归子莫
1k 声望1.2k 粉丝

信息安全工程师,现职前端工程师的全栈开发,三年全栈经验。