Among the SVG shape tags, path is the most powerful one, and mastering path is enough to deal with common drawing problems.
Let's take a look at the basic usage of the path tag first:
<path d="M100,100 L200,200 L200,400" fill="#333" stroke="#000" />
The path tag defines the path through the property d, which defines the information consisting of a string, and the path can also be defined by the fill and stroke attributes to define the fill and border.
The information of the d attribute is actually not complicated, it is composed of letters and numbers, numbers represent coordinate points, and letters are responsible for representing how to connect these coordinate points. For example, in the above example, M represents the starting point and L represents a straight line connection, so the information of d can be interpreted like this:
M100,100 -> starts at the (100,100) coordinate point
L200,200 -> Draw a straight line from (100,100) to (200,200).
L200,400 -> Draw a straight line from (200,200) to (200,400).
In the d attribute of the path tag, there are a total of 10 commands that can be used, and the following 5 commands are basic and relatively simple.
M moves to (moveTo) x,y start point coordinates
Z closepath connects the start and end points of the path in a straight line
L lineTo: The current node is connected in a straight line to the specified (x,y) node
H horizontal line x keeps the y coordinate of the current point constant, and the x axis moves to x, forming a horizontal line
V vertical line y keeps the x coordinates of the current point unchanged, and the y axis moves to y, forming a vertical line
M and L
Let's look at another example of M and L
<path d="M30,30 L170,30 L30,170 L170,170"></path>
From point A (30, 30), the straight line is drawn to point B (170, 30), then straight to point C (30, 170), and then straight to point D (170, 170), and finally forms a Z-shaped path.
Fill effect, and Z
<path d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="yellow"></path>
There are two M's in this path description, so in one path, two relatively independent paths appear, the first path is the same as the example above, which is Z-shaped.
The second path is a rectangle with the Z command appearing in the description, indicating that it connects the beginning and end of the path.
In addition, here we define the fill property for the path, and you can see that the fill will take effect regardless of whether the path is closed or not.
H and V
Finally, let's take a look at the two commands H and V, which are actually the abbreviation of the L command when the x or y axis remains unchanged, so the following two ends are described and the drawn picture is the same.
<path d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="yellow"></path>
<path d="M30,30 H170 L30,170 H170 M170,90 H190 V110 H170Z" fill="yellow"></path>
|
Posted on 8/14/2017 1:15:15 PM
|
|
|
