SVG环形进度条实现+注释说明

 参考：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 (
      

        
        

          

      
    )
  }
}
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%;
}