<!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>动态图标</title>
<style >
.wrap{
/* background-color: aqua; /
}
.icon-path {
/ stroke-dasharray: 1000; /
/ stroke-dasharray: 60, 50, 60; */
stroke-dasharray: 2000;
stroke-dashoffset: 400;
animation: icon-path-animation 8s ease-in infinite;
}
@keyframes icon-path-animation {
0% {
stroke-dasharray: 26572;
stroke-dashoffset: 26572;
}
40% {
stroke-dasharray: 26572;
stroke-dashoffset: 0;
fill: #6f8fcc;
}
60% {
stroke-dasharray: 26572;
stroke-dashoffset: 0;
fill: #77aaec;
}
100% {
stroke-dasharray: 26572;
stroke-dashoffset: 0;
fill: #397fdb;
}
}
</style>
</head>
<body>
<div class="wrap">
<svg t="1678342087148" class="icon" viewBox="0 0 4564 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7110" width="200" height="200">
<path d="M6.641371 789.7088V49.152h517.705143v78.848H126.624914v253.717943h377.124572v75.424914H126.654171v332.565943H6.641371zM870.6048 731.428571c96.021943-4.564114 145.173943-70.8608 147.456-198.8608-2.282057-132.564114-51.434057-201.142857-147.456-205.706971-98.274743 2.282057-148.538514 70.8608-150.820571 205.706971 4.564114 125.717943 54.857143 192.014629 150.849828 198.8608z m-3.393829 71.972572c-169.1648-9.128229-258.282057-99.386514-267.439542-270.833372 6.846171-180.575086 98.304-274.285714 274.285714-281.161142 171.446857 6.875429 260.564114 99.474286 267.410286 277.738057-4.564114 178.293029-95.963429 269.7216-274.256458 274.285714z m366.855315-3.393829v-366.884571c2.282057-118.842514 61.703314-178.263771 178.263771-178.263772h171.446857v78.848h-133.705143c-61.732571 0-93.739886 30.866286-96.021942 92.5696v373.730743H1234.066286zM1930.064457 261.705143v78.877257H1830.619429v445.703314H1710.665143V340.5824h-72.001829V261.705143h71.972572V172.558629C1708.383086 55.998171 1764.381257-1.141029 1878.659657 1.170286h123.435886v78.848h-82.300343c-59.421257-2.282057-89.146514 27.4432-89.146514 89.146514v92.5696h99.445028zM2399.758629 731.428571v-198.8608h-137.128229c-102.868114 0-154.272914 34.289371-154.272914 102.868115 0 61.732571 46.840686 93.710629 140.551314 95.992685h150.849829z m-130.282058-277.7088h130.282058c4.593371-91.428571-39.994514-134.875429-133.705143-130.282057-77.706971-2.282057-129.141029 31.978057-154.272915 102.838857h-92.5696c27.413943-118.842514 110.855314-177.122743 250.2656-174.840685 146.285714 0 218.287543 62.844343 216.005486 188.562285v363.432229H2245.485714c-148.567771-2.282057-223.992686-55.998171-226.274743-161.148343 0-125.717943 83.412114-188.562286 250.2656-188.562286z m329.142858 335.989029V265.128229h120.0128v524.580571H2598.619429z m0-630.842514V49.152h120.0128v109.714286H2598.619429z m202.283885 181.686857V261.7344h89.146515V49.152h120.0128v212.553143h116.560457v78.877257h-116.560457v308.545829c-2.282057 52.575086 18.285714 77.736229 61.732571 75.454171 20.538514 0 42.247314-6.875429 65.1264-20.567771v61.703314c-27.4432 25.161143-62.8736 37.712457-106.2912 37.712457-95.992686 2.282057-142.862629-45.728914-140.580571-144.003657V340.5824h-89.146515z m411.4432 449.155657V265.128229h119.983543v524.580571h-119.983543z m0-630.842514V49.152h119.983543v109.714286h-119.983543z m229.697829 630.842514V251.435886h270.862628c146.285714-2.282057 218.287543 65.1264 216.005486 202.283885v335.989029h-116.560457V467.441371c0-91.428571-43.446857-137.157486-130.282057-137.157485h-120.0128v459.424914h-120.0128z m984.005486-89.146514V333.706971h-92.5696c-125.717943 2.282057-189.703314 66.296686-191.985372 192.014629 2.282057 116.560457 65.1264 174.840686 188.562286 174.840686h95.992686z m-387.423086 219.428571v-85.723428c64.014629 64.014629 134.875429 96.021943 212.5824 96.021942 121.124571 2.282057 179.434057-50.293029 174.840686-157.696h-123.435886c-189.703314 0-284.554971-82.300343-284.554972-246.871771 4.564114-178.293029 100.5568-268.580571 288.007315-270.862629h239.996343v497.137372c4.564114 173.728914-83.441371 258.282057-264.016458 253.717943-102.838857 0-183.998171-28.584229-243.419428-85.723429z"
fill="#fff" class="icon-path" stroke="#1875F0" stroke-width="40" p-id="7111"></path></svg>
</div>
</body>
<script>
const iconPath = document.getElementsByClassName('icon-path') // 获取 path 标签
for (let i = 0; i < iconPath.length; i++) {
const item = iconPath[i]
console.log(item.getTotalLength()) // 获得 path 路径长度
}
//学习来源https://juejin.cn/post/6916146797328990216
</script>
</html>
