svg接力绘图演示

admin

再来一次

admin

<style>
    #msvg {
        display: block;
        margin: auto;
        path {
            stroke-dasharray: var(--perimeter);
            stroke-dashoffset: var(--perimeter);
            fill: none;
            stroke: green;
            stroke-width: 2;
            animation: draw 4s var(--delay) linear forwards;
        }
        circle {
            stroke-dasharray: var(--perimeter);
            stroke-dashoffset: var(--perimeter);
            fill: none;
            stroke: green;
            stroke-width: 2;
            animation: draw 4s var(--delay) linear forwards, fill 2s calc(var(--delay) + 4s) forwards;
        }
    }
    .tMid { text-align: center; }
    @keyframes draw { to { stroke-dashoffset: 0; } }
    @keyframes fill { to { fill: lightgreen; } }
</style>

<svg id="msvg" width="400" height="400" viewBox="-200 -200 400 400" xmlns="http://www.w3.org/2000/svg">
    <path d="M-180 0 L0 -180 L180 0 L0 180Z"></path>
    <path d="M-88 -88 L88 -88 L88 88 L-88 88Z"></path>
    <circle x="0" y="0" r="86"></circle>
</svg>
<p class="tMid"><button type="button">再来一次</button></p>

<script>
    const paths = document.querySelectorAll('#msvg path');
    const circle = document.querySelector('#msvg circle');

    [...paths, circle].forEach((elm, key) => {
        elm.style.cssText += `
            --perimeter: ${Math.ceil(elm.getTotalLength())};
            --delay: ${key * 4}s;
        `;
    });

    function reStartAnimation() {
        [...paths, circle].forEach(elm => {
            elm.style.animation = 'none';
            setTimeout(() => {
                elm.style.animation = 'draw 4s var(--delay) linear forwards';
                if (elm.tagName === 'circle') {
                    elm.style.animation += ', fill 2s calc(var(--delay) + 4s) forwards';
                }
            });

        });
    }
</script>