SVG画圆

SVG 基础属性介绍

• width、height：分别表示 SVG 元素的宽高。
• viewBox：
• 前两个参数是对 SVG 元素做位移使用，通常设置为 0；
• 后两个参数表示 SVG 元素可容纳的大小，具体可参考 SVG 属性之viewBox。

circle

• cx、cy：圆心的位置。
• r：表示半径。
• fill：圆的填充色。
• stroke-width：边框宽度。
• stroke：边框的填充色。

模拟一个百分比

• stroke-dasharray：顾名思义，dash 表示虚线，stroke-dash 可理解为将边框设置为虚线，stroke-dasharray 表示这个属性可以接收多个值，实际上一般是接收两个值，例如：
• stroke-dasharray: 2,2，表示边框的长度是 200，间隔 200 的宽度，再有 200 的虚线长度...，依次类推，呈现的效果是 -- -- -- --
• stroke-dashoffset：设置边框的偏移距离，这个属性是核心，通过设置它的偏移位置来模拟出百分比。

<svg width="18px" height="18px" viewBox="0 0 18 18">
  <circle
    r="7"
    cx="9"
    cy="9"
    fill="#fff"
    stroke="#FFC858"
    stroke-width="14"
    stroke-dasharray="0 44"
    :id="`precentCircle${id}`" />
</svg>

@keyframes fillup {
  to {
    stroke-dasharray: 44 44;
  }
}

svg {
  transform: rotate(-90deg);

  background: #ffc858;

  border-radius: 50%;
}

circle {
  animation: fillup 5s linear infinite;
}

通过改变 stroke-dasharray 的值来完成饼状效果，其中第一个 44 的值是要画圆的周长，第二个是圆的周长，因为半径一样所以通过覆盖来完成饼状图。