element Progress 环形进度条渐变样式修改 2.0

效果图

实现原理，用两个进度条 通过定位叠加在一起，红色部分使用transform
代码

                  <el-progress
                    class="circle1"
                    :width="81"
                    type="circle"
                    :stroke-width="5"
                    :percentage="70"
                  ></el-progress>
                  <el-progress
                    class="circle2"
                    :width="81"
                    type="circle"
                    :stroke-width="8"
                    :percentage="100-13-70"
                  ></el-progress>
                  <p>联办率</p>
      <svg width="100%" height="0">
        <defs>
          <linearGradient id="write1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color: #4facfe" stop-opacity="0.8"></stop>
            <stop offset="100%" style="stop-color: #00f2fe" stop-opacity="1"></stop>
          </linearGradient>
          <linearGradient id="write2" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="100%" style="stop-color: #d72e36" stop-opacity="1"></stop>
          </linearGradient>
        </defs>
      </svg>

           .circle1 /deep/ {
              .el-progress__text {
                font-weight: bold;
                color: #fff;
                top: 45%;
              }
              svg > path:nth-child(2) {
                stroke: url(#write1);
              }
              .el-progress-circle__track {
                stroke: transparent;
              }
            }
            .circle2 {
              transform: rotateY(180deg) rotate(20deg);
              position: absolute;
              top: 0;
              left: 0;
              margin: auto;
              /deep/ {
                .el-progress__text {
                  display: none;
                }
                svg > path:nth-child(2) {
                  stroke: url(#write2);
                }
                .el-progress-circle__track {
                  stroke: transparent;
                }
              }
            }