参考：https://www.cnblogs.com/guojikun/p/10663487.html
/** */ import React, { Component } from 'react' import { Input, InputNumber } from 'antd' import styles from './styles.module.less' class TeacherManageTest extends Component { state = { num: 252.2, } numChange = value => { console.log('value===', value) if (value < 252.2) { this.setState({ num: 252.2 }) } else if (value > 504.4) { this.setState({ num: 504.4 }) } else { this.setState({ num: value }) } } render() { return ( <div> <InputNumber value={this.state.num} min={252.2} max={504.4} onChange={this.numChange} /> <div style={{ width: '200px', height: '200px' }}> <svg viewBox="0 0 100 100"> //底层背景板进度条 <path d="M 50 50 m -40 0 a 40 40 0 1 0 80 0 a 40 40 0 1 0 -80 0" fill="none" stroke="#E7E7E7"//默认淡灰色 stroke-width="5"//进度条宽度 ></path> //变化进度条颜色 <path d="M 50 50 m -40 0 a 40 40 0 1 0 80 0 a 40 40 0 1 0 -80 0" fill="none" stroke="#20a0ff" stroke-linecap="round" className={styles.my_svg_path}//进度条样式 style={{ strokeDashoffset: this.state.num }}//strokeDashoffset控制进度条进度，252.2为原点，504.4为满圆 transform="rotate(90,50,50)" stroke-width="5" ></path> </svg> </div> </div> ) } } export default TeacherManageTest .my_svg_path { stroke-dasharray: 252.2px, 252.2px; stroke-dashoffset: 252.2px; //进度 transition: stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease 0s; transform: rotateZ(90deg); transform-origin: 50% 50%; }
