How do I animate SVG stroke to act as a gauge?
Question
I have this code set up:
.gauge { stroke-dasharray: 1000; stroke-dashoffset: 500; animation: dash 5s linear alternate; } @keyframes dash { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 1000; } }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="dist/style.css"> <title>Gauge</title> </head> <body> <div class="gauge"> <svg width="500" height="500" fill="white" stroke="red" stroke-width="25" stroke-linecap="round"> <circle cx="200" cy="200" r="100"/> </svg> </div> </body> </html>
What I'd like to do is to turn it into a gauge as this (forget about the color & All): enter image description here
I'm having hard trouble understanding the dasharray & dashoffset commands in order to transform it into what I need...can anyone help with that?
1 answers
solution1
0 2021-12-20 19:51:33
Animating either stroke-dashoffset or stroke-dasharray depends partly on the use case. Here I find it easier to 1) rotate the circle with transform/rotate and 2) animate the stroke-dasharray .
A prerequisite is setting the pathLength attribute. Setting it on a <circle> will control the the length of a full circle. In this case it looks more or less like the gauge is 2/3 of a circle. So, it makes sense for the full circle to be 150 and 2/3 is then 100.
Now the length of the gauge can be controlled by the first value in the stroke-dasharray . The second value should just grater than 100 -- it is the length of the space between the line in the array.
.gauge { stroke-dasharray: 100 150; animation: dash 5s linear alternate; } @keyframes dash { from { stroke-dasharray: 100 150; } to { stroke-dasharray: 0 150; } }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="dist/style.css"> <title>Gauge</title> </head> <body> <div class="gauge"> <svg width="500" height="500" fill="white" stroke="red" stroke-width="25" stroke-linecap="round"> <circle transform="rotate(150 200 200)" cx="200" cy="200" r="100" pathLength="150"/> </svg> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.