项目中突然遇到一些棘手的问题，原型进度条组件不支持颜色渐变，然后又不想用echart类的比较重的组件。所以打算涉猎一下svg的知识。

以下写法依赖组件的样式，以及一些变量也是没做转换。因为想早点睡觉，先这样吧。

import React from "react";

interface StopProps {
  color: string;
  offset: string;
  opacity?: number;
}
interface Props {
  percent?: number;
  colors?: StopProps[];
  bgColor?: string;
  textRenderFun?: React.ReactNode;
}

const ProgressWrapper = ({
  percent = 0,
  colors = [],
  bgColor,
  textRenderFun,
}: Props) => {
  // 默认直径
  const per = 2.8902652413026093;

  return (
    <>
      <div style={{ display: "inline-block", marginLeft: "20px" }}>
        <div className="next-progress-circle next-progress-circle-show-info next-large">
          <svg className="next-progress-circle-container" viewBox="0 0 100 100">
            <defs>
              <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                {colors.length > 0 ? (
                  colors.map(({ color, offset, opacity = 0.8 }) => (
                    <stop
                      offset={offset}
                      style={{ stopColor: color, stopOpacity: opacity }}
                    />
                  ))
                ) : (
                  <stop style={{ stopColor: " green", stopOpacity: 0.8 }} />
                )}
              </linearGradient>
            </defs>
            <path
              className="next-progress-circle-underlay"
              d="M 50,50 m 0,-46 a 46,46 0 1 1 0,92 a 46,46 0 1 1 0,-92"
              fill-opacity="0"
              style={{ stroke: bgColor || "" }}
            ></path>
            <path
              className="next-progress-circle-overlay"
              d="M 50,50 m 0,-46 a 46,46 0 1 1 0,92 a 46,46 0 1 1 0,-92"
              fill-opacity="0"
              stroke-dasharray="289.02652413026095px 289.02652413026095px"
              stroke-dashoffset={`${(100 - percent) * per}px`}
              stroke="url(#grad1)"
            ></path>
          </svg>
          <div className="next-progress-circle-text">
            {textRenderFun ? textRenderFun : `${percent}%`}
          </div>
        </div>
      </div>
    </>
  );
};
export default ProgressWrapper;