<!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>
标签：svg,app,4s,stroke,animation,dashoffset,line,动态,绘制 From： https://www.cnblogs.com/justSmile2/p/17909796.html