svg的圆形进度条

Posted 2020-11-09 小数点就是问题

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了svg的圆形进度条相关的知识，希望对你有一定的参考价值。

目前发现svg实现一些动画效果是比较高效简单的。

如圆形进度条，只要会stroke-dasharray与stroke-dashoffset属性基本就可以实现，而且美观。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .svg{
        transform: rotate(-90deg);
    }
    .t1{
        stroke-dashoffset:0px;
        animation: donut-show-one linear 5s forwards;
    }
    @keyframes donut-show-one {
        from{
        stroke-dashoffset: 0px;
        }
        to {
        stroke-dashoffset: -565px;
      }
    }
    </style>
</head>
<body>
    <svg width="300px" height="300px" class="svg">
        <circle id="donut-graph" class="t2" r="90" cy="150" cx="150" stroke-width="4" stroke="#000" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
        <circle id="donut-graph" class="t1" r="90" cy="150" cx="150" stroke-width="4" stroke="#666" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dasharray="565" />  
    </svg>
</body>
</html>

stroke-dasharray是实线长度与实线之间距离的设置值，当一个为一个值是就是同等值，就是实线与间隙同等长。

stroke-dashoffset这是偏移值。

这两个值如果一起使用在stroke-dasharray为圆的周长时而stroke-dashoffset动态设置值，那么就会出现圆的进度条的效果。

资料1

以上是关于svg的圆形进度条的主要内容，如果未能解决你的问题，请参考以下文章

Angular SVG圆形进度条不适用于Ionic