<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>svg</title> </head> <body> <div class="box" style="width:128px;height:128px;"> <svg width="100%" height="100%" viewBox="0 0 128 128"> <defs> <linearGradient id="svg_1" x1="0%" y1="0%" x2="100%" y2="64.9%"> <stop offset="0%" stop-color="red"/> <stop offset="26%" stop-color="orange"/> <stop offset="42%" stop-color="yellow"/> <stop offset="71%" stop-color="green"/> <stop offset="100%" stop-color="blue"/> </linearGradient> </defs> <circle r="62" cx="64" cy="64" stroke-width="4" stroke="#d3d3d3" fill="none" transform="rotate(-89,64 64)"></circle> <circle class="circle" r="62" cx="64" cy="64" stroke-width="4" stroke="url(#svg_1)" stroke-linecap="round" transform="rotate(-89,64 64)" stroke-dasharray="300 389" fill="none" stroke-opacity="1"> </circle> </svg> </div> </body> </html>
效果如图：
大小颜色，数据可以自行修改，如何修改和动画效果可参考这里
https://jiajiafan.github.io/svg-progressBar/
