demand
Main knowledge points
Reference: developer.mozilla.org/zh-CN/docs/…
1. The
2.
2. The path command M (Move to requires two parameters, respectively the X-axis and Y-axis coordinates of the point to be moved to), M (also Move to requires two parameters, respectively the X-axis distance to be moved relative to the current position, and the Y-axis distance to be moved relative to the current position), Positions in lower-case path commands represent relative positions.
3. Path command A (arc command, arc can be regarded as part of A circle or oval),
A(rx RY, x-axis-rotation, Large-arc-flag, sweep-flag, x y)
Rx: X-axis radius
Ry: y radius
Rotation: Rotation of the x axis (clockwise is positive)
Large-arc-flag: Indicates whether the arc is greater than or less than 180 degrees. 0 indicates a small angular arc, and 1 indicates a large angular arc
Sweep -flag: the direction of the arc, 0 means that the arc is drawn counterclockwise from the beginning to the end, 1 means that the arc is drawn clockwise from the beginning to the end
X: x terminus of radians
Y: Y terminus of radians
(it’s _ you)? Why do we need so many parameters to draw arcs?
Developer.mozilla.org/zh-CN/docs/…
4. Stroke-dasharray: Pattern pattern that can be controlled for stroke (used to draw dashed lines)
5. The stroke-Dashoffset property specifies the distance from the dash mode to the start of the path
(mainly use 4 and 5 knowledge points to display the colored progress on the ring ^_^)
The value of the 6viewBox property is a list of four arguments, min-x, min-y, width and height, separated by Spaces or commas, specifying a rectangular region in user space mapped to the given element; Ex. :
viewBox="0 0 100 100"Copy the codeEquivalent, if you draw a pattern in the 100*100 range and all sizes are relative to 100*100, if the actual size of the SVG at this point is 200*200, the units of length in the entire pattern will actually be twice as large.
Main implementation steps
1. Draw a circle that fills the entire container
<div class="wrap" >
<svg viewBox="0 0 100 100">
<path
stroke-width="10"
fill="none"
stroke="blue"
d=" M 5 50 A 45 45, 0, 0, 1, 95 50 A 45 45, 0, 0, 1, 5 50 "
/>
</svg>
</div>Copy the code <style>
.wrap{
width:300px;
height:300px;
border:1px solid pink;
}
</style>Copy the codeThe actual size of SVG is determined by the size of the SVG tag or the external container; Since the strokeWidth also takes up position, if you want to draw a maximum circle, the radiusradius = (width-strokeWidth)/2You get 45, and radius is the distance from the center to the middle of the line
First move the brush to the coordinate (5, 50) M 5, 50 and give a draw arc command
A 45, 45, 0, 0, 1, 95 50 // Draws an upper semicircleCopy the codeThen give a draw arc command
A 45, 45, 0, 0, 1, 5 50 // Lower half circle ok, circleCopy the code
2. The progress ring is displayed on the original ring
Add a
<div class="wrap" >
<svg viewBox="0 0 100 100">
<path
stroke-width="10"
fill="none"
stroke="blue"
d=" M 5 50 A 45 45, 0, 0, 1, 95 50 A 45 45, 0, 0, 1, 5 50 "
/>
<path
stroke-width="10"
fill="none"
stroke="red"
d=" M 5 50 A 45 45, 0, 0, 1, 95 50 A 45 45, 0, 0, 1, 5 50 "
/>
</svg>
</div>Copy the codeThis time is like this: blue circle by red circle pressure below!
Good! How w to make the red circle show only part of it? I’m going to talk a little bit about stroke-Dasharray and stroke-Dasharray
So let’s try a stroke-dasharray and draw a dotted line from 0,20 to 100,20
<path stroke-dasharray="5, 3" d="M0 20 L100 20" stroke="red"/>Copy the code
Next we’ll look at the role of stroke-Dashoffset, dashed line offset
<path
stroke-dashoffset="2"
stroke-dasharray="5, 3"
d="M0 20 L100 20" stroke="red"
/>Copy the codeThe entire dotted line was dragged 2 units in the direction of the starting point!
So can we draw something with a red circle and a transparent circle wrapped around it, and then offset it toward the starting point
Let’s do the perimeter Math.PI * 2 * radius
stroke-dasharray="Math.PI * 2 * 45"
To make the progress bar 80% of the circle, drag 20% of the perimeter toward the starting point
stroke-dashoffset="Math.PI * 2 * 45*.2"
<div class="wrap" >
<svg viewBox="0 0 100 100">
<path
stroke-width="10"
fill="none"
stroke="blue"
d=" M 5 50 A 45 45, 0, 0, 1, 95 50 A 45 45, 0, 0, 1, 5 50 "
/>
<path
stroke-width="10"
fill="none"
stroke="red"
d=" M 5 50 A 45 45, 0, 0, 1, 95 50 A 45 45, 0, 0, 1, 5 50 "
stroke-dasharray ="282"
stroke-dashoffset="56.4"
/>
</svg>
</div>Copy the codeIf you want rounded corners stroke-linecap=”round”
It’s basically done, and if you want something moving you can animate it by using Transition.
The implementation principle of the semi-circle progress bar is the same. Just draw a half circle. It can be encapsulated into flexible components for use.
This is the first time for beginners to write an article, which aims to share and record the learning process. If there is anything that is not good enough, please point out, (*╹▽╹*)
