<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> html{ height: 100%; } body{ position: relative; top:50%;left: 50%; transform: translate(-50%,-50%); height: 100%; margin: 0; } </style> <body> <svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg"> <text text-anchor='middle' font-size='42px' transform='translate(100,120)' fill='#000'>50.0%</text> <g> <!-- M:将画笔移到指定的坐标位置 C:三次贝赛曲线 A:弧线 Z:关闭路径 --> <path fill='rgba(154,205,50,.8)' d='M 0 100 C 140.6 94.24 45.08 106.32 2000 100 A 95 95 0 0 1 0 100 Z'> <animate dur='5s' repeatCount='indefinite' attributeName='d' attributeType='XML' values=' M 0 100 C 90 28,92 179,200 100 A 95 95 0 0 1 0 100 Z; M 0 100 C 145 100,41 100,200 100 A 95 95 0 0 1 0 100 Z; M 0 100 C 90 28,92 179,200 100 A 95 95 0 0 1 0 100 Z;'></animate> </path> </g> <circle cx='100' r='80' cy='100' stroke-width='10' stroke='white' fill='transparent'></circle> <circle cx='100' r='90' cy='100' stroke-width='20' stroke='yellowgreen' fill='none'></circle> </svg> </body> </html>
