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的值是要画圆的周长，第二个是圆的周长，因为半径一样所以通过覆盖来完成饼状图。