使用svg画圆环

花生吃花生

已于 2022-09-06 20:59:23 修改

阅读量2k

点赞数

分类专栏： css 文章标签： javascript 开发语言 ecmascript

于 2022-09-06 20:59:12 首次发布

本文链接：https://blog.csdn.net/m0_59967951/article/details/126733628

版权

效果图

使用组件把这个给封装，代码：需要传入参数为类名，中间的数值，以及圆环百分比。里面的数字是根据位置调整上去的哦。

那么这个svg中的circle中的cx和cy就是坐标位置，stroke-width就是边界宽度，stroke就是颜色。

function circle(className, value, percent) {
  let content = `
  <div class="cirbox" style="position:relative;width:100px;height:100px">
  <svg width="100" height="100" style="transform: rotate(-90deg);">
    <circle
      cx="50"
      cy="50"
      r="40"
      stroke-width="6"
      stroke="#e9eef2"
      fill="none"
    ></circle>
    <circle
      class="${className+"path"}"
      cx="50"
      cy=