编辑包含SVG

Question

嗨，我有一个客户请求，要创建一个进度圈的react组件，我在整个互联网上搜索了那种进度圈，最后我发现了一个我需要编辑以得到正确组件的相似的react组件，但是我没有我不知道SVG是如何工作的，我需要有关如何编辑此SVG的建议。跟随Image是我想要的最终结果：

我下载的react组件来自此链接https://www.npmjs.com/package/react-gradient-progress

从npm下载的进度圈，我们可以指定2种具有线性渐变的颜色，但是我想要4种颜色，第一种颜色从0％开始，以33％结尾，然后下一种颜色从33％开始，以66％结尾，下一颜色从66％开始。结束于100％无渐变，但颜色突然改变我需要如何编辑此第三方代码？代码如下：

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = _interopDefault(require('react'));
var PropTypes = _interopDefault(require('prop-types'));

function styleInject(css, ref) {
  if ( ref === void 0 ) ref = {};
  var insertAt = ref.insertAt;

  if (!css || typeof document === 'undefined') { return; }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css = ".circle_reactGradientProgress__1iWe_ {\n  display: inline-block;\n  border-radius: 100%;\n  position: relative;\n}\n.circle_reactGradientProgressPercentage___Ka8U {\n  height:100%;\n  width: 100%;\n  position: absolute;\n  margin: 0px auto;\n}\n\n.circle_reactGradientProgressPercentageSpan__37tYu {\n  position: absolute;\n  height:100%;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-content: center;\n  flex-direction: column;\n  text-align: center;\n}\n\n.circle_progressCircle__R85wl {\n  position: absolute;\n}\n\n.circle_progressCircleBar__2_-gP {\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n}\n";
var styles = { "reactGradientProgress": "circle_reactGradientProgress__1iWe_", "reactGradientProgressPercentage": "circle_reactGradientProgressPercentage___Ka8U", "reactGradientProgressPercentageSpan": "circle_reactGradientProgressPercentageSpan__37tYu", "progressCircle": "circle_progressCircle__R85wl", "progressCircleBar": "circle_progressCircleBar__2_-gP" };
styleInject(css);

var CircleProgress = function CircleProgress(_ref) {
  var percentage = _ref.percentage,
      width = _ref.width,
      strokeWidth = _ref.strokeWidth,
      fontSize = _ref.fontSize,
      fontColor = _ref.fontColor,
      fontFamily = _ref.fontFamily,
      primaryColor = _ref.primaryColor,
      secondaryColor = _ref.secondaryColor,
      fill = _ref.fill;

  var PI = 3.14;

  var R = width / 2 - strokeWidth * 2;
  var circumference = 2 * PI * R;
  var offset = circumference - percentage / 100 * circumference;
  var gradientId = ('' + primaryColor[0] + primaryColor[1]).replace(/#/g, '');
  return React.createElement(
    'div',
    {
      className: styles.reactGradientProgress,
      style: {
        height: width + 'px',
        width: width + 'px'
      }
    },
    React.createElement(
      'div',
      { id: styles.reactGradientProgressPercentage },
      React.createElement(
        'span',
        {
          className: styles.reactGradientProgressPercentageSpan,
          style: {
            fontSize: fontSize,
            fontFamily: fontFamily,
            color: fontColor
          }
        },
        percentage,
        '%'
      )
    ),
    React.createElement(
      'svg',
      {
        className: styles.progressCircle,
        width: '100%',
        height: '100%',
        version: '1.1',
        xmlns: 'http://www.w3.org/2000/svg'
      },
      React.createElement(
        'linearGradient',
        {
          id: gradientId,
          x1: '0%',
          y1: '0%',
          x2: '100%',
          y2: '100%'
        },
        React.createElement('stop', { offset: '0%', stopColor: primaryColor[0] }),
        React.createElement('stop', { offset: '100%', stopColor: primaryColor[1] })
      ),
      React.createElement('circle', {
        strokeWidth: strokeWidth,
        fill: 'transparent',
        r: R,
        cx: width / 2,
        cy: width / 2,
        stroke: secondaryColor,
        strokeDasharray: circumference + ' ' + circumference
      }),
      React.createElement('circle', {
        className: styles.progressCircleBar,
        strokeWidth: strokeWidth,
        fill: fill,
        r: R,
        cx: width / 2,
        cy: width / 2,
        stroke: 'url(#' + gradientId + ')',
        strokeLinecap: 'round',
        strokeDasharray: circumference + ' ' + circumference,
        strokeDashoffset: offset
      })
    )
  );
};

CircleProgress.propTypes = {
  percentage: PropTypes.number.isRequired,
  width: PropTypes.number,
  strokeWidth: PropTypes.number,
  fontSize: PropTypes.string,
  fontColor: PropTypes.string,
  fontFamily: PropTypes.string,
  primaryColor: PropTypes.array,
  secondaryColor: PropTypes.string,
  fill: PropTypes.string
};

CircleProgress.defaultProps = {
  width: 200,
  strokeWidth: 5,
  fontSize: '30px',
  fontColor: 'inherit',
  fontFamily: 'inherit',
  primaryColor: ['#00BBFF', '#92d7f1'],
  secondaryColor: 'transparent',
  fill: 'transparent'
};

exports.CircleProgress = CircleProgress;
//# sourceMappingURL=index.js.map