SVG描边动画的实现

目录

SVG描边动画的实现

效果展示

image

源码

点击查看代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .icon {
        stroke: red;
        stroke-width: 5px;
        fill: none;
        animation: icon 2s linear infinite forwards;
      }

      @keyframes icon {
        0% {
          stroke-dasharray: 10772;
          stroke-dashoffset: 10772;
        }

        50% {
          stroke-dasharray: 10772;
          stroke-dashoffset: 0;
        }

        100% {
          stroke-dasharray: 10772;
          stroke-dashoffset: 0;
        }
      }
    </style>
  </head>
  <body>
    <div style="margin: 50px auto; width: 300px; height: 300px">
      <svg
        t="1640915781365"
        class="icon"
        viewBox="0 0 1147 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="11752"
        width="200"
        height="200"
      >
        <path
          d="M1089.477486 513.024q17.408 8.192 15.36 14.336t-15.36 7.168q-4.096 1.024-35.84 3.072t-77.312 5.632-97.792 7.168-96.768 7.168-75.264 5.632-32.768 2.048q-3.072-40.96 11.264-70.656 6.144-12.288 16.896-24.064t27.136-19.968 39.936-11.264 56.32 0q64.512 7.168 110.592 17.92t77.312 21.504 49.664 20.48 26.624 13.824zM631.749486 613.376q7.168-4.096 38.4-8.192t74.752-8.192 93.696-7.68 96.768-6.144 83.456-4.096 53.248-2.56l68.608-26.624-111.616 99.328 0-49.152-20.48 20.48-4.096 43.008-28.672 21.504-2.048-51.2-15.36 10.24-9.216 55.296-148.48 74.752-6.144-53.248-22.528 11.264-5.12 57.344-217.088 102.4 3.072-84.992-14.336 92.16q-83.968 40.96-150.528 59.392t-118.272 22.528-89.6-3.072-64-18.944-40.96-24.064-20.992-18.432q-2.048-19.456-3.072-43.008t-2.048-44.032q-1.024-23.552-1.024-47.104 15.36 20.48 41.472 33.792t56.832 21.504 62.976 11.264 60.416 3.584 49.664-1.536 30.72-4.096q17.408-4.096 48.128-13.824t62.464-19.968l59.392-20.48q25.6-8.192 33.792-11.264l517.12-204.8q-14.336 2.048-42.496 5.632t-65.024 8.704-78.848 11.776-82.944 12.8q-97.28 15.36-211.968 32.768-8.192-2.048-2.56-19.456t15.872-36.864q11.264-22.528 29.696-50.176-10.24 34.816-11.264 50.176t1.024 20.48q3.072 5.12 9.216 1.024zM1138.629486 482.304q6.144 6.144 7.68 13.312t-1.536 12.288-9.216 6.144-14.336-5.12q-5.12-4.096-33.28-29.184t-67.584-60.928-84.992-76.8-85.504-75.776-69.12-57.856-35.328-24.064q-8.192 0-24.576 22.016t-40.96 59.392-55.808 86.016-68.096 101.376-77.824 105.472-84.992 97.792-90.112 69.632-90.112 32.256-82.944 1.024-68.096-23.04-46.08-40.448-15.872-50.688q1.024-30.72 13.312-77.312t35.328-101.888 56.32-114.176 75.264-114.688 91.648-102.912 105.984-78.848q73.728-39.936 134.144-49.664t108.544-2.56 83.456 24.576 58.88 32.768q16.384 11.264 49.664 45.568t73.728 79.872 82.944 95.744 78.848 93.184 61.44 73.216 29.184 34.304zM73.669486 581.632q7.168-2.048 18.432-11.776t21.504-20.992 17.92-22.528 7.68-17.408-6.656-13.824-14.848-15.872q-10.24-9.216-21.504-18.432-11.264 17.408-19.456 38.912t-11.264 40.448-1.536 31.232 9.728 10.24zM310.213486 647.168q8.192-2.048 20.48-12.288t23.04-22.528 18.944-24.576 8.192-18.432-7.168-14.848-15.36-16.896q-10.24-9.216-22.528-19.456-12.288 18.432-20.992 41.984t-12.8 43.52-2.048 32.768 10.24 10.752zM428.997486 456.704q24.576 0 36.352-7.68t13.312-16.896-6.144-15.872-19.968-5.632q-55.296 7.168-103.424 3.072-20.48-1.024-40.96-4.608t-38.912-10.24-33.28-16.896-22.016-24.576q-12.288-3.072-21.504-1.024-8.192 2.048-12.288 8.192t1.024 20.48q7.168 19.456 23.552 32.256t38.4 20.992 47.616 11.776 50.688 5.12 47.616 1.536l39.936 0zM521.157486 321.536q17.408-16.384 38.4-43.52t38.912-57.856 29.184-60.416 10.24-50.176q-1.024-16.384-25.088-27.648t-59.904-14.336-76.8 4.096-74.752 28.672q-13.312 8.192-33.792 25.6t-42.496 39.424-42.496 46.08-33.28 46.08-14.848 39.424 12.288 25.6q11.264 6.144 32.768 11.776t48.128 8.704 55.808 4.096 55.808-1.024 48.64-8.192 33.28-16.384z"
          p-id="11753"
        ></path>
      </svg>
    </div>

    <script>
      const path = document.querySelector('path')
      console.log(path.getTotalLength())
    </script>
  </body>
</html>

基础知识

主要依靠css动画和stroke-dasharray、stroke-dashoffset属性

stroke-dasharray属性

属性stroke-dasharray可控制用来描边的点划线的图案范式。

点划线样式如下(stroke-dasharray: 50 30 20)

image

值

image

如果值是50 30 20， 得到的绘制效果.可查看stroke-dasharray属性图例

50          30      20      50       30      20    ...
短划线长度 缺口长度 短划线长度 缺口长度 短划线长度 缺口长度 ...

如果值是50 30，得到的绘制效果

50          30      50      30       50      30    ...
短划线长度 缺口长度 短划线长度 缺口长度 短划线长度 缺口长度 ...

如果值是50，得到的绘制效果

50          50      50      50       50      50    ...
短划线长度 缺口长度 短划线长度 缺口长度 短划线长度 缺口长度 ...

stroke-dashoffset属性

定义了stroke-dasharray向左偏移的量

示例stroke-dasharray: 50;
image

image

思路总结

  1. 使用path标签的长度作为stroke-dasharray的值
  2. 使用path标签的长度作为stroke-dashoffset的值（使绘制的内容被隐藏）
  3. 使用css动画，将stroke-dashoffset的值降为0（使绘制的内容逐渐显示出来）

参考

stroke-dasharray

stroke-dashoffset

posted @ 2021-12-31 11:56  酉云良  阅读(223)  评论(0)    收藏  举报