demand

    

Main knowledge points

Reference: developer.mozilla.org/zh-CN/docs/…

1. The element is one of the most powerful SVG base shapes, and it can create not only other base shapes, but many more

2. property d A number of point sets and other information about how to draw a path (the value is path command information)

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 code

Equivalent, 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 code

The 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 code

Then 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 to overlay the original circle, and then use stroke-Dasharray and stroke-Dashoffset to achieve the progress bar effect. 

 <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 code

This 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 code

The 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 code

If 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, (*╹▽╹*)