After reading most of Path's instructions in the last article, this article will introduce the most difficult A instruction. What is A? It is "Arcs" (Arcs), more simply, it is to draw an elliptical arc (Elliptical Arc). Some people may have questions here, why is it an elliptical arc instead of a circular arc? Because the ellipse can be made into a circle, it is so simple. Therefore, there are so many parameters in the A command, and there are as many as 7 parameters. The following will explain these parameters for you one by one.
- rx : the x-axis radius of the ellipse (converted to scale according to different end points)
- ry : the y-axis radius of the ellipse (converted to scale according to different end points)
- x-axis-rotation : the angle between the arc and the x-axis
- large-arc-flag: 1 for large-angle arcs, 0 for small-angle arcs (must have three points)
- sweep-flag: 1 is clockwise, 0 is counterclockwise
- x : end point x coordinate
- y : the y coordinate of the end point
Basic usage
First, let's look at an arc drawn by the A command: prolate, the ratio of x, y axis radius is 5:1, small angle arc, counterclockwise
<path d="M0 0 A100 20,0 0 0 50 100" stroke="#000" fill="none"/>
Prolate type, x,y axis radius ratio is 5:1, small angle arc, clockwise
<path d="M0 0 A100 20,0 0 1 50 100" stroke="#000" fill="none"/>
Prolate type, the ratio of x, y axis radius is 5:1, large angle arc, clockwise (because there are only two points, so the results of the size and angle are the same, return to the original point)
<path d="M0 0 A100 20,0 1 1 50 100" stroke="#000" fill="none"/>
Difference in size and angle
Many people may be confused when you see the above picture, why the size and angle are the same result, just because we only provide two points in Path, and the two points have only one line, so there will be no angle problem, so for the actual test, we Add one more point and you can see the difference in size and angle.
大角度 ( 黑色線 )
<path d="M0 0 L50 50 A50 50,0 1 0 100 0" stroke="#000" fill="none"/>
小角度 ( 紅色線 )
<path d="M0 0 L50 50 A50 50,0 0 0 100 0" stroke="#f00" fill="none"/>
However, it should be noted here that if the sum of the lengths of the x and y axes of the arc is less than the distance between the two points of the arc, it will always be displayed as a large-angle arc. According to the above formula, the distance between the two points of the arc will be displayed. The length is: the square of 50 plus the square of 50 and then the square root, which is about 70.7. Therefore, if the sum of the lengths of the two axes less than the arc is less than 70.71, it will always be represented by a large-angle arc.
Less than 70.71 (add up to 60, the two arcs overlap)
大角度 ( 黑色線 )
<path d="M0 0 L50 50 A50 10,0 1 0 100 0" stroke="#000" fill="none"/>
小角度 ( 紅色線 )
<path d="M0 0 L50 50 A50 10,0 0 0 100 0" stroke="#f00" fill="none"/>
Greater than 70.71 (add up to 80, the two arcs are separated)
大角度 ( 黑色線 )
<path d="M0 0 L50 50 A50 30,0 1 0 100 0" stroke="#000" fill="none"/>
小角度 ( 紅色線 )
<path d="M0 0 L50 50 A50 30,0 0 0 100 0" stroke="#f00" fill="none"/>
Why is this so? Mainly because the arc of a small angle means that the sum of the three interior angles of the triangle is less than 180 degrees, but it does not mean that the sum of the arc and the straight line can become a negative value, because if it becomes a negative value, it will also become a large-angle arc after calculation. It is also a place to be very careful! The image below is a good example of this:
Regarding the command of A, the most difficult thing is the above-mentioned large-angle and small-angle arc, and the last parameter refers to the angle between the x-axis of the arc and the x-axis of the screen. Let's look at the following example:
夾角 0 度 ( 黑色線 )
<path d="M0 0 A50 100,0 0 0 100 0" stroke="#000" fill="none"/>
夾角 30 度 ( 紅色線 )
<path d="M0 0 A50 100,30 0 0 100 0" stroke="#f00" fill="none"/>
夾角 60 度 ( 橘色線 )
<path d="M0 0 A50 100,60 0 0 100 0" stroke="#f90" fill="none"/>
The above is the most confusing A command in Path!
Reprinted from: http://www.oxxostudio.tw/articles/201406/svg-05-path-2.html