SVG LOGO animation


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>SVG动态图标</title>
    <style>
        .icon-path {
            animation: icon-path-animation 5s ease-in 1;
            fill: #4749A0;
        }
        
        @keyframes icon-path-animation {
            0% {
                stroke-dasharray: 2056;
                stroke-dashoffset: 4917;
                fill: #fff;
            }
            40% {
                stroke-dasharray: 2056;
                stroke-dashoffset: 0;
                fill: #fff;
            }
            60% {
                stroke-dasharray: 2056;
                stroke-dashoffset: 0;
                fill: #4749A0;
            }
            100% {
                stroke-dasharray: 2056;
                stroke-dashoffset: 0;
                fill: #4749A0;
            }
        }
        
        .st1 {
            fill: #000;
            animation: icon-path2-animation 5s ease-in 1;
        }
        
        @keyframes icon-path2-animation {
            0% {
                stroke-dasharray: 2056;
                stroke-dashoffset: 4917;
                fill: #fff;
            }
            40% {
                stroke-dasharray: 2056;
                stroke-dashoffset: 0;
                fill: #fff;
            }
            60% {
                stroke-dasharray: 2056;
                stroke-dashoffset: 0;
                fill: #000;
            }
            100% {
                stroke-dasharray: 2056;
                stroke-dashoffset: 0;
                fill: #000;
            }
        }
    </style>
</head>

<body>
    <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2000 1000" style="enable-background:new 0 0 2000 1000;" xml:space="preserve">
        <path class="icon-path" stroke="#4749A0" d="M182.5,696.1c52.1-52.4,104.2-104.8,156.5-157c37.2-37.4,74.4-74.8,114.1-114.7l-159.7-6.1
            c88.6-75.6,183-155.7,270.5-230.5c-43.2-20.4-90.5-30.9-138.3-30.9c-179.2,0-324.4,145.2-324.4,324.4c0,2.7,0,5.3,0.1,8v288.9
            l8.7-8.7l4.7-4.7C137.2,741.8,159.8,718.9,182.5,696.1L182.5,696.1z"/>
        <path class="icon-path" stroke="#4749A0" d="M682.8,283.6c-36.9,27.3-86.9,64.1-121.9,89.9c-14.8,10.9-29.6,21.9-44.6,33l11.3,0.3l138.7,4.2
            C517.2,520.5,370.6,628.2,224.3,735.7c1.7,1.3,3.4,2.7,5.2,4c-1.7-1.3-3.4-2.7-5.1-4l-95.2,69.9h289.1c2.5,0.1,5,0.1,7.5,0.1
            c179.2,0,324.4-145.2,324.4-324.4C750.1,409.8,726.5,340.2,682.8,283.6z"/>
        <polygon class="st1"  points="854.2,743 912.1,743 966,365.9 914.2,329.9 "/>
        <polygon class="st1"  points="1050.8,349 1009.5,257.9 953.5,257.9 990.8,349 "/>
        <path class="st1"  d="M1338.6,264.2h-269.1l20.7,48.8H1291c6.9,0,11,0.7,12.4,2.1c1.5,3.3,2.2,6.9,2.1,10.6l-49.7,368.6h-68.3l12.4,48.7h107.7
            l58-447c1.4-11.3,0-19.8-4.1-25.4C1357.2,266.3,1349.6,264.2,1338.6,264.2z"/>
        <path class="st1"  d="M1678.4,357.5c-5.7-4.2-14.8-6.4-27.5-6.4h-67.8c4.2-46.6,7.1-77.7,8.5-93.2h-59.3c-2.8,26.8-5.7,57.9-8.5,93.2h-76.3
            l12.7,46.6h57.2c-5.9,43.7-15.1,86.9-27.5,129.2c-14.1,45.2-30.4,86.2-48.7,122.9c-18.3,36.7-36,68.5-53,95.3h69.9
            c31-55.1,56.5-110.2,76.3-165.2c18.3-55.1,32.5-115.8,42.4-182.2h36c4.2,0,7,0.7,8.5,2.1v8.5c-14.1,101.7-29.7,198.4-46.6,290.2h-72
            l14.8,46.6h110.2c18.3-110.2,36.7-229.5,55.1-358C1684.1,373,1682.7,363.1,1678.4,357.5z"/>
        <path class="st1"  d="M1909.4,327.8c-5.7-2.8-13.4-4.2-23.3-4.2h-152.5l-61.4,421.6h186.4l55.1-387.7C1916.4,341.9,1915,332,1909.4,327.8z
            M1852.2,374.4l-46.6,324.1h-67.8l46.6-328.4h65.7C1852.9,370.2,1853.6,371.6,1852.2,374.4z"/>
        <path class="st1"  d="M1218.9,499.1l-61.5-1.9l-5-0.1l19.8-14.6c15.5-11.5,54-39.8,54-39.8s1.7,0.8-52.7-42.5c-38.8,33.1-80.6,68.6-119.8,102.1
            l70.8,2.7c-17.6,17.7-34.1,34.3-50.6,50.9c-23.1,23.2-46.2,46.4-69.4,69.6l0,0c-10,10.1-20,20.3-30,30.4l-2.1,2.1l-3.9,3.8
            c3.6,5,12.3,12.2,12.3,12.2l42.2-31l0,0C1087.8,595.4,1152.8,547.7,1218.9,499.1z"/>
    </svg>
    <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 路径长度
        }
    </script>
</body>

</html>