Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.06.2020, 13:10
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 260

svgartista, svg анимация
Есть такой ресурс
https://svgartista.net/

Там можно сделать анимацию svg и вроде все там работает а когда копирую код не работает, не подскажете в чем дело
Ответить с цитированием
  #2 (permalink)  
Старый 20.06.2020, 13:16
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 260

<!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>    
</body>
</html>


вот простая анимация не проигрывается
Ответить с цитированием
  #3 (permalink)  
Старый 20.06.2020, 13:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,801

Сообщение от Сергей Ракипов
вот простая анимация не проигрывается
кто-то не добавляет класс 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>
Ответить с цитированием
  #4 (permalink)  
Старый 20.06.2020, 13:39
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 260

рони,
Спасибо как всегда признателен.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
SVG анимация с animateTransform emporiosweb Элементы интерфейса 0 20.09.2019 14:34
Анимация SVG JohnJohn Общие вопросы Javascript 0 18.04.2018 19:18
SVG теги юзера Герасим Общие вопросы Javascript 1 02.03.2018 20:29
Анимация svg tyshka Работа 1 25.12.2016 23:26
SVG CSS, SVG to WOFF kobezzza Firefox/Mozilla 2 29.03.2013 13:59