Javascript-форум - svgartista, svg анимация

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /*************************************************** * Generated by SVG Artista on 6/20/2020, 3:10:45 PM * MIT license (https://opensource.org/licenses/MIT) * W. https://svgartista.net **************************************************/ svg .svg-elem-1 { stroke-dashoffset: 273.5750732421875px; stroke-dasharray: 273.5750732421875px; -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s; transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s; } svg.active .svg-elem-1 { stroke-dashoffset: 0; } </style> </head> <body>   <svg version="1.1" id="_x31_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve" width="128" height="128"> <style type="text/css"> .st0{fill:none;stroke:#00658B;stroke-miterlimit:10;} </style> <path class="st0 svg-elem-1" d="M114.7,64.4v25.3c0,14-11.4,25.4-25.4,25.4H63.9H38.6c-14,0-25.4-11.4-25.4-25.4V64.4V39.1 c0-14,11.4-25.4,25.4-25.4h25.3"></path> </svg> </body> </html>

Цитата:

Сообщение от Сергей Ракипов

вот простая анимация не проигрывается

кто-то не добавляет класс active.

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
/***************************************************
 * Generated by SVG Artista on 6/20/2020, 3:10:45 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

 svg .svg-elem-1 {
    stroke-dashoffset: 273.5750732421875px;
    stroke-dasharray: 273.5750732421875px;
    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
                    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}

svg.active .svg-elem-1 {
    stroke-dashoffset: 0;
}

        </style>
</head>
<body>
        <!--?xml version="1.0" encoding="utf-8"?-->
<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="_x31_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve" width="128" height="128">
        <style type="text/css">
                .st0{fill:none;stroke:#00658B;stroke-miterlimit:10;}
        </style>
        <path class="st0 svg-elem-1" d="M114.7,64.4v25.3c0,14-11.4,25.4-25.4,25.4H63.9H38.6c-14,0-25.4-11.4-25.4-25.4V64.4V39.1
                c0-14,11.4-25.4,25.4-25.4h25.3"></path>
        </svg>
<script>
setTimeout(() => document.querySelector('#_x31_').classList.add('active'), 100)

</script>
</body>
</html>