svg的简单使用

<template>
  <div id="pro">
    <button style="display:block;margin:0 auto" :disabled="disabled" @click="begin">开始</button>
    <!-- 内置图形：
      rect(矩形)    
      circle(圆)  
      ellipse(椭圆)   
      line(直线)   
      polyline(折线)  
      polygon(多边形)  
      path(路径)
    -->
    <!-- 内置样式
      fill(填充颜色)   
      fill-opacity(填充透明度)
      stroke(边框颜色)   
      stroke-width(边框宽度)   
      stroke-opacity(边框透明度)   
      stroke-dasharray(定义实线虚线的长度)
      stroke-dashoffset(定义实线/虚线的起点距离 路径 的起点的距离)
      transform(变换)
      filter(滤镜)(url[#滤镜id)]
    -->
    <svg style="width:300px;height:300px">
      <!-- r代表圆的半径；cx、cy代表圆心坐标；fill代表填充颜色，这里是透明 -->
      <circle r="50" cx="100" cy="100" fill="transparent" class="bg" />
      <circle
        r="50"
        cx="100"
        cy="100"
        fill="transparent"
        class="inner"
        stroke-dasharray="314"
        :stroke-dashoffset="progress"
      />
      <!-- 上面 stroke-dasharray="314"  314是圆的周长，2πr = 2 x 3.14 x 50 -->
      <!-- 定义了实线长度为314，stroke-dashoffset可以通过动态绑定来控制 -->
    </svg>
  </div>
</template>

.bg {
  stroke-width: 8px; /* 设置边框宽度 */
  stroke: red; /* 设置边框颜色 */
}

.inner {
  stroke-width: 8px; /* 设置边框宽度 */
  stroke: blue; /* 设置边框颜色 */
}