任意svg图标实现描边动画

<style>
    .ani{
        stroke: lightblue;
        stroke-width: 5;
        stroke-dasharray: var(--l);
        stroke-dashoffset: var(--l);
        animation: stroke 2s forwards;
        stroke-linecap: round;
    }

    @keyframes stroke {
        to {
            stroke-dashoffset: 0;
        }
    }
</style>

<script>
    let sel = 'sel-svg';
    let paths = doucment.querySelectorAll(sel + ' path');

    paths.forEach(p => {
        let len = p.getTotalLength();
        path.classList.add('ani');
        path.style.setProperty('--l', len);
    })
</script>