利用svg画圆环进度条的两种方式

  • 时间:
  • 浏览:
  • 来源:互联网
本文只要描述利用svg circle标签的实现方法
  • 知识点准备(摘自阮一峰老师的网络日志)

    1.<svg>标签

    SVG 代码都放在顶层标签``之中。下面是一个例子。

    <svg width="100%" height="100%">
      <circle id="mycircle" cx="50" cy="50" r="50" />
    </svg>
    

    <svg>的width属性和height属性,指定了SVG 图像在` HTML 元素中所占据的宽度和高度。除了相对单位,也可以采用绝对单位(单位:像素)。如果不指定这两个属性,SVG 图像默认大小是300像素(宽) x 150像素(高)。

    如果只想展示 SVG 图像的一部分,就要指定viewBox属性。

    <svg width="100" height="100" viewBox="50 50 50 50">
      <circle id="mycircle" cx="50" cy="50" r="50" />
    </svg>
    

    属性的值有四个数字,分别是左上角的横坐标和纵坐标、视口的宽度和高度。上面代码中,SVG 图像是100像素宽 x 100像素高,`viewBox属性指定视口从(50, 50)这个点开始。所以,实际看到的是右下角的四分之一圆。

    注意,视口必须适配所在的空间。上面代码中,视口的大小是 50 x 50,由于 SVG 图像的大小是 100 x 100,所以视口会放大去适配 SVG 图像的大小,即放大了四倍。

    如果不指定width属性和height属性,只指定viewBox属性,则相当于只给定SVG 图像的长宽比。这时,SVG 图像的默认大小将等于所在的 HTML 元素的大小。

    2.circle标签

    ``标签代表圆形。

    <svg width="300" height="180">
      <circle cx="30"  cy="50" r="25" />
      <circle cx="90"  cy="50" r="25" class="red" />
      <circle cx="150" cy="50" r="25" class="fancy" />
    </svg>
    

    上面的代码定义了三个圆。标签的`cx`、`cy`、`r`属性分别为横坐标、纵坐标和半径,单位为像素。坐标都是相对于画布的左上角原点。

    class属性用来指定对应的 CSS类。

    .red {
      fill: red;
    }
    
    .fancy {
      fill: none;
      stroke: black;
      stroke-width: 3pt;
    }
    

    SVGCSS 属性与网页元素有所不同。

    • fill:填充色
    • stroke:描边色
    • stroke-width:边框宽度

    3.animate标签

    ``标签用于产生动画效果。

    <svg width="500px" height="500px">
      <rect x="0" y="0" width="100" height="100" fill="#feac5e">
        <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
      </rect>
    </svg>
    

    上面代码中,矩形会不断移动,产生动画效果。

    animate的属性含义如下。

    • attributeName:发生动画效果的属性名。
    • from:单次动画的初始值。
    • to:单次动画的结束值。
    • dur:单次动画的持续时间。
    • repeatCount:动画的循环模式。
    • fill:可以让动画结束后停留 可选值 freeze:停在最后一帧 remove:回到初始帧

    可以在多个属性上面定义动画。

    <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
    <animate attributeName="width" to="500" dur="2s" repeatCount="indefinite" />
    
  • 两种方式主要利用了svgstroke-dasharray属性控制描边幅度

    stroke-dasharray 属性通俗来讲就是把描边变成点状形态,类似borderdashed 的效果

    stroke-dasharray 可接受多个参数

    例如:

    1.stroke-dasharray: 10 表示 先描边10个单位 在空10个单位 在描边10个单位 在空10个单位...... 直到描完整个边
    2.stroke-dasharray: 10 20 表示 先描边10个单位 在空20个单位 在描边10个单位 在空20个单位...... 直到描完整个边
    3.stroke-dasharray: 10 20 30 表示 先描边10个单位 在空20个单位 在描边30个单位 在空10个单位...... 直到描完整个边
    
以下是具体实现方式

1.利用svganimate标签实现

<svg height="400" width="400" viewBox="0 0 400 400">
  <circle
    cx="200"
    cy="200"
    r="170"
    fill="yellow"
    stroke="red"
    stroke-width="30"
    stroke-dasharray="0 1200"
    stroke-linecap="round"
  >
    <animate fill="freeze" attributeName="stroke-dasharray" from="0 1200" to="500 1200" dur="2s" repeatCount="1" />
  </circle>
</svg>
//此处stroke-dasharray的第二个参数只要能够大于整个圆环路径周长就可以,通过控制animate中 to 的属性,控制描边幅度,具体像圆环这种效果可以画两个circle,一个有描边,一个按上述控制就是圆环进度条的样子。

2.利用js动态控制 stroke-dasharray属性,然后再css中加上过渡动画

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html, body {
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
    circle {
       //圆环的过渡动画
      -webkit-transition: stroke-dasharray 800ms;
      transition: stroke-dasharray 800ms;
    }
  </style>
</head>
<body>
<svg width="440" height="440" viewbox="0 0 440 440">
  <circle cx="220" cy="220" r="170" stroke-width="50" stroke="blue" fill="none"></circle>
  <circle cx="220" cy="220" r="170" stroke-width="50" stroke="red" fill="none" transform="matrix(0,-1,1,0,0,440)" stroke-dasharray="0 1069"></circle>
</svg>
<script>
  let percent = 0.7  //从接口获取到的圆环填充百分比
  let circle = document.querySelectorAll("circle")[1];
  let perimeter =  circle.getTotalLength() //圆环的周长
  circle.setAttribute('stroke-dasharray', perimeter * percent + " " + perimeter * (1- percent));
</script>
</body>
</html>

本文链接http://element-ui.cn/news/show-340093.aspx