likes
comments
collection
share

SVG实现 进度条 效果

作者站长头像
站长
· 阅读数 22

最近需求中，要实现一个进度条效果，如下图： SVG实现 进度条 效果

加上一些其他的显示节点信息就是这样（随便画画演示一下，请包涵~）

SVG实现 进度条 效果

实现的方法呢，个人感觉用css不是很好实现，因为我没想到什么好办法，哈哈哈。

主要在于这个进度条是一个渐变颜色，而其中的节点呢，也需要同步动态位置的颜色。

最后选择了使用svg去实现这个效果。

构思层级

我的想法就是：首先拆分两层，背景层 和 颜色层，颜色层压着背景层，实现进度条效果

一、容器设定

你需要先设置一个容器，这个容器主要是定义进度条的宽度

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        margin: 50px auto;
        width: 400px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <svg ref="progressBar" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        ...插入内容
    </svg>
    </div>
  </body>
</html>

二、背景层的实现

2.1、灰色背景条实现

通过在 <defs> 标签中定义一个名为progressBg的<rect>裁剪路径，并填上背景色以及宽width、高height 、圆角rx属性，最后得到一个灰色背景

SVG实现 进度条 效果

     <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">    
      <defs>
        <clipPath id="progressBg">
          <rect x="0" y="24" width="100%" height="8" rx="8"></rect>
        </clipPath>
      </defs>
      <rect clip-path="url(#progressBg)" fill="#f3f4f6" x="0" y="0" height="100%" width="100%"></rect>
    </svg>

2.2、灰色背景节点实现

另外对于这个节点实现，需要进行下偏移计算

设定一个数据哈，比如：

target 代表进度条满条件数量，我们可以用来当计算几点位置的分母

doneNum呢，代表的是我们已经完成的数量，我们可以等下用来计算彩条进度

nodeList就是代表节点的个数还有表示到达阶段条件，amount可以用来做背景节点的偏移量位置计算

    const data = {
      target: 150,
      doneNum: 45,
      nodeList: [
        {
          amount:50
        },
        {
          amount:90
        },
        {
          amount:150
        }
      ]
    }

我们现在需要将灰色背景节点偏移量计算，背景节点的半径我设置是7px哈,

在计算偏移量的时候，需要再向左偏移一个半径单位，保证原心在中间

最后将计算好的节点dom,插入到svg的实例中

// 容器的宽度400px
const grayNodeList = nodeList.map((item, index) => {
    const positionX = (item.amount / target) * 400 - 7
    return `<circle key="${index}" cx="${positionX}" cy="28" r="7"></circle>`
 })
 
      const result = `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">   
      <defs>
        <clipPath id="progressBg">
           ${grayNodeList.join('')}
          <rect x="0" y="24" width="100%" height="8" rx="8"></rect>
        </clipPath>
      </defs>
      <rect clip-path="url(#progressBg)" fill="#f3f4f6" x="0" y="0" height="100%" width="100%"></rect>
    </svg>`
      this.$refs.progressBar.innerHTML = result

得到如下背景层

SVG实现 进度条 效果

三、颜色层以及整体的实现

3.1、 定义彩条渐变颜色

通过在 <defs> 标签中定义一个id名为subtraction的<linearGradient>渐变背景色

     <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">    
      <defs>
      <linearGradient id="subtraction" x1="0" y1="0" x2="100%" y2="0">
          <stop offset="10.89%" stop-color="#ff8c28"></stop>
          <stop offset="88.45%" stop-color="#ffd74a"></stop>
          <stop offset="100.3%" stop-color="#ffdc99"></stop>
      </linearGradient>
        <clipPath id="progressBg">
          <rect x="0" y="24" width="100%" height="8" rx="8"></rect>
        </clipPath>
      </defs>
      <rect clip-path="url(#progressBg)" fill="#f3f4f6" x="0" y="0" height="100%" width="100%"></rect>
    </svg>

它主要定义的css属性是

 background-color: linear-gradient(to right, #ff8c28 10.89%, #ffd74a 88.45%, #ffdc99 100.3%);

3.2、彩色背景条 & 整体实现

通过在 <defs> 标签中定义一个名为progressBar的<rect>裁剪路径，并填上背景色以及宽width、高height 、圆角rx属性，最后得到一个彩背景，宽度需要计算一下

SVG实现 进度条 效果

参照 灰色背景条和节点的实现，注意渲染的点

彩条宽度需要根据数据中的doneNum已完成数 和 target目标数以及容器宽度400px来计算

const colorBarWidth = doneNum/target * 400

彩条的节点计算注意 达到条件的节点才需要渲染，这里彩色节点我是设置的比灰色节点要小1px,半径为6px

// 先过滤达到条件的节点才需要渲染
const canGotAwardList = await nodeList.filter((item: any) => doneNum >= item.amount)
// 计算彩色节点偏移量
const colorNodeList = nodeList.map((item, index) => {
    const positionX = (item.amount / target) * 400 - 6
    return `<circle key="${index}" cx="${positionX}" cy="28" r="6"></circle>`
 })
 
      const result = `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">   
      <defs>
       <linearGradient id="subtraction" x1="0" y1="0" x2="100%" y2="0">
          <stop offset="10.89%" stop-color="#ff8c28"></stop>
          <stop offset="88.45%" stop-color="#ffd74a"></stop>
          <stop offset="100.3%" stop-color="#ffdc99"></stop>
        </linearGradient>
        <clipPath id="progressBg">
           ${grayNodeList.join('')}
          <rect x="0" y="24" width="100%" height="8" rx="8"></rect>
        </clipPath>
         <clipPath id="progressBar">
          ${colorNodeList.join('')}
          <rect x="1" y="25" width=${colorBarWidth} height="6" rx="6" ry="6"></rect>
        </clipPath>
      </defs>
      <rect clip-path="url(#progressBg)" fill="#f3f4f6" x="0" y="0" height="100%" width="100%"></rect>
      
      <rect clip-path="url(#progressBar)" fill="url(#subtraction)" x="0" y="0" height="100%" width="100%"></rect>
    </svg>`
      this.$refs.progressBar.innerHTML = result

finally

最后的话，实现效果还可以，达到验收要求咯。

换你们的话，会用什么实现呢？css镂空 或者是 canvas，还是其他,

欢迎JY大佬们在评论区建议发言！

转载自:https://juejin.cn/post/7374683456716537895
评论
请登录