前端 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>
相关推荐
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic5 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年7 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder7 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727577 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架