前端 CSS 经典:SVG 描边动画

1. 原理

使用 css 中的 stroke 属性,用来描述描边的样式,其中重要的属性 stroke-dasharraystroke-dashoffset。理解了这两个属性的原理,才能理解描边动画实现的原理。

stroke-dasharray:将描边线变成虚线、其中实线和虚线部分的长度就是它的值。

stroke-dashoffset:描边线的偏移量。为正数时往左偏移。

实现原理:将 stroke-dasharray 和 stroke-dashoffset 设置为

svg 中 path 的长度,这样初始状态就是无边状态 ,其中 path 长度 需要动态获取,通过 getTotalLength 方法可以获取 path 的长度。设置动画,将描边线的偏移量 stroke-dashoffset 设为 0 ,这样 svg 就从无边状态变成有边状态,其中变化的过程就是描边动画。

html 复制代码
<!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>
      .p {
        /* 如果 svg 为封闭图,那么默认填充为黑色,需要将填充色去掉,设置为 none */
        fill: none;
        /* 描边线颜色 */
        stroke: #f40;
        /* 描边线宽度 */
        stroke-width: 10;
        /* 描边线头设为圆头 */
        stroke-linecap: round;
        /* --l 为变量,通过 js 动态获取 */
        stroke-dasharray: var(--l);
        stroke-dashoffset: var(--l);
        /* forwards当动画完成后,保持最后一帧的状态 */
        animation: stroke 2s forwards;
      }
      @keyframes stroke {
        to {
          stroke-dashoffset: 0;
        }
      }
    </style>
  </head>
  <body>
    <svg class="icon" viewBox="0 0 1024 1024" width="200" height="200">
      <path
        class="p"
        d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0zM213.333 832A298.667 298.667 0 0 1 512 533.333a170.667 170.667 0 1 1 170.667-170.666A170.667 170.667 0 0 1 512 533.333 298.667 298.667 0 0 1 810.667 832z"
      ></path>
    </svg>
  </body>
  <script>
    // 拿到 svg 路径
    const paths = document.querySelectorAll(".icon .p");
    // 遍历路径,动态获取路径长度,然后复制。
    paths.forEach((path) => {
      // getTotalLength 能拿到当前 path 路径的长度
      const len = path.getTotalLength() + 1;
      path.style.setProperty("--l", len);
    });
  </script>
</html>
相关推荐
我要洋人死24 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人35 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人36 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR41 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香43 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#