VUE SVG

记录

              <div class="circle_area">
                <svg width="100" height="100">
                  <circle
                    cx="50"
                    cy="50"
                    r="40"
                    stroke="#6abdff"
                    stroke-width="5"
                    fill="none"
                  ></circle>
                  <circle
                    id="svg_circle_process"
                    cx="50"
                    cy="50"
                    r="40"
                    stroke="white"
                    stroke-width="5"
                    fill="none"
                    transform="rotate(-90,50,50)"
                    :stroke-dasharray="strokearray"
                  ></circle>
                  <text
                    id="svg_circle_process_text"
                    x="50"
                    y="58"
                    fill="white"
                    text-anchor="middle"
                    font-size="23"
                  >
                    {{ hasReadLen }}/{{ courseLen }}
                  </text>
                </svg>
              </div>

　　

strokearray 就传的是 "0 252" "252 252"之类的，前面是分子，后面是分母，代表圆圈的进度