如何在 SVG 标签上循环 CSS 动画

Question

所以我的代码工作得很好，它在 <svg> 标签上创建了一个笔画动画！

问题是动画只重复一次（当我刷新页面时）

我想无限循环动画，但我不知道怎么做！

   body{
        background-color: yellow;
    }
    
    #logo{
        position: absolute;
        top: 50%;
        left: 50%;
     transform: translate(-50%,-50%);
        animation: fill 0.6s ease forwards 1.3s;
    
    }
    
    #logo path:nth-child(1) {
            stroke-dasharray: 788.711181640625px;
            stroke-dashoffset: 788.711181640625px;
        animation: line-anim 1.2s ease forwards;
    }
    
    @keyframes line-anim{
        to{
            stroke-dashoffset: 0;
        }
    }
    
    
    @keyframes fill {
        from{
            fill: transparent;
        }
        
        to{
            fill: white;
        }
    }

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="test.css">
    </head>
    <body>
        <svg id="logo" width="313" height="302" viewBox="0 0 313 302" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M223.4 157.2C232.2 160.1 237 169.6 234.1 178.4C231.8 185.3 225.4 189.9 218.2 189.9C211.2 189.9 205 185.6 202.5 179.1H184.7C182.3 179.1 180.2 177.5 179.4 175.3L173.9 158.8L156.6 219.4C155.9 221.8 153.7 223.4 151.2 223.4H150.9C148.3 223.3 146.1 221.3 145.7 218.8L127.8 111.3L114.7 174.9C114.1 177.4 111.9 179.1 109.3 179.1H84.2C81.1 179.2 78.5 176.8 78.4 173.7C78.3 170.6 80.7 168 83.7 167.9C83.9 167.9 84 167.9 84.2 167.9H104.9L123.4 82.4C124.1 79.4 127.2 77.5 130.2 78.3C132.4 78.8 134.1 80.7 134.4 82.9L152.7 192.5L168.2 138.3C168.9 136 171 134.3 173.4 134.3H173.5C175.9 134.3 178 135.9 178.8 138.1L188.7 167.9H202.3C205.1 159.1 214.6 154.3 223.4 157.2Z" stroke="black" stroke-width="5"/>
    <path d="M313 85.4C313 113.2 300.8 152.7 277.1 185.1C231.9 247 156.7 301.1 156.7 301.1C156.7 301.1 81.5 247 36.3 185.1C12.5 152.6 0.399994 113.2 0.399994 85.4C0.399994 38.8 38 0.9 84.6 0.5H85.4C115.2 0.5 141.6 16.3 156.8 39.6C172 16.3 198.4 0.5 228.2 0.5H229C275.5 0.9 313 38.8 313 85.4ZM234.1 178.4C237 169.6 232.2 160.1 223.4 157.2C214.6 154.3 205.1 159.1 202.2 167.9H188.6L178.7 138.1C177.9 135.8 175.8 134.3 173.4 134.3H173.3C170.9 134.3 168.7 136 168.1 138.3L152.6 192.5L134.3 82.9C133.9 80.6 132.3 78.8 130.1 78.3C127.1 77.6 124 79.4 123.3 82.4L104.8 167.9H84.1C83.9 167.9 83.8 167.9 83.6 167.9C80.5 168 78.1 170.6 78.3 173.7C78.4 176.8 81 179.2 84.1 179.1H109.2C111.8 179.1 114 177.4 114.6 174.9L127.7 111.3L145.6 218.8C146 221.4 148.2 223.3 150.8 223.4H151.1C153.6 223.4 155.8 221.8 156.5 219.4L173.8 158.8L179.3 175.3C180.1 177.6 182.2 179.1 184.6 179.1H202.4C204.9 185.6 211.1 189.9 218.1 189.9C225.4 189.9 231.8 185.3 234.1 178.4Z" fill="#6C63FF"/>
    </svg>
    
    </body>
    </html>

Answer 1

尝试将 infinite 道具添加到您的动画中：

#logo path:nth-child(1) {
        stroke-dasharray: 788.711181640625px;
        stroke-dashoffset: 788.711181640625px;
        animation: line-anim 1.2s ease forwards infinite;
}

如何在 SVG 标签上循环 CSS 动画

How to loop CSS animation on SVG tag

html

css

svg

loops

stroke