<!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> #app { border: 1px solid red; } #app :nth-child(1) { stroke-dasharray: 359; stroke-dashoffset: 359; animation: line-w 4s ease 0.5s forwards; /* animation: name duration timing-function delay iteration-count direction fill-mode; */ } #app :nth-child(2) { stroke-dasharray: 201; stroke-dashoffset: 201; animation: line-w 4s ease 4s forwards; } #app :nth-child(3) { stroke-dasharray: 1173; stroke-dashoffset: 1173; animation: line-w 4s ease 8s forwards; } #app path { transition: all 4s; } @keyframes line-w { to { stroke-dashoffset: 0; } } </style> </head> <body> <svg id="app" width="372" height="580" xmlns="http://www.w3.org/2000/svg"> <path d="m55.5,164.453125c0,4 0.499031,5.953323 1,14c0.497101,7.984543 0.998062,15.906647 2,32c0.683514,10.978745 -0.640728,15.051651 0,19c1.013081,6.242889 2.420433,8.085815 3,10c1.04483,3.450851 2.538704,4.60643 5,6c3.587929,2.031448 8,1 9,1c2,0 5.587006,0.237259 11,-14c3.371437,-8.867554 6,-17 9,-29c1,-4 2.499382,-12.962601 3,-23c0.199257,-3.995041 0.851952,-6.228363 2,-9c0.541199,-1.306564 1,0 1,3c0,6 1.498291,13.937958 2,20c0.577362,6.976151 1.903397,19.016907 3,25c0.919258,5.015472 2.420433,16.085815 3,18c1.04483,3.450851 2.385094,6.372009 5,10c2.480713,3.441803 4.712006,5.981628 10,7c3.927826,0.756424 6.675446,2.324554 13,-4c3.162277,-3.162277 4.438614,-8.817596 8,-18c2.286987,-5.896591 2.080994,-9.10701 3,-13c1.027481,-4.352509 2.733063,-12.036285 3,-13c1.556473,-5.61937 3,-10 3,-11c0,-2 0,-5 0,-6c0,-2 -0.320358,-3.025818 0,-5c0.506546,-3.121445 1,-6 1,-7l0,-1l0,-1" id="svg_1" fill-opacity="null" stroke-opacity="null" stroke-width="6" stroke="#000" fill="none" /> <path d="m272.5,144.453125c0,2 -0.197083,7.009735 0,9c0.502441,5.074203 1,10 1,16c0,5 0,11 0,16c0,4 0,14 0,16c0,4 0,7 0,13c0,9 -0.207397,12.953796 -1,17c-1.359283,6.939194 -2.75531,10.132004 -5,14c-1.809723,3.118484 -3.693451,4.458801 -5,5c-4.619385,1.913422 -9,0 -15,0c-11,0 -16.372009,0.614899 -20,-2c-4.589081,-3.307617 -5.917526,-7.056641 -8,-10c-2.887863,-4.081696 -6.458801,-8.693436 -7,-10c-0.765366,-1.847763 -2,-5 -3,-8c-1,-3 -1.917603,-5.386871 -3,-8c-0.38269,-0.923874 0,-5 -1,-7l-2,-4l0,-2" id="svg_2" fill-opacity="null" stroke-opacity="null" stroke-width="7" stroke="#000" fill="none" /> <path stroke="#000" id="svg_3" d="m202.703677,142.129528l-71.056652,85.873722l70.178226,29.501695l-64.865124,92.192832l-26.188663,-15.568158l18.574702,88.86375l73.817669,-38.770715l-31.167005,-16.205975l84.632115,-132.418712l-77.363308,-23.999983l74.70679,-89.48177l-42.614172,-13.435222l46.413218,-56.870342l-17.050247,-0.817311l-72.024128,78.019999l34.006572,13.116214l0.000007,-0.000025z" fill-opacity="null" stroke-opacity="null" stroke-width="6" fill="none" /> <ellipse filter="url(#svg_6_blur)" ry="9.5" rx="9.5" id="svg_6" cy="429.953125" cx="124" stroke-width="7" stroke="#aaffff" fill="#007fff" /> </svg> <script> var wrap = document.querySelector('#app') var paths = wrap.querySelectorAll('path') paths.forEach((item, index) => { console.warn('item', item.getTotalLength()) }) // http://www.zuohaotu.com/svg/#move_front </script> </body> </html>