Почему моя SVG-анимация не работает?
У меня есть этот svg, который я уже две недели пытаюсь оживить ...
<?xml version = "1.0" encoding = "UTF-8" standalone = "no"?>
<svg
xmlns = "http://www.w3.org/2000/svg"
id = "svg1"
version = "1.1"
viewBox = "49.595489 30.040314 84.135223 84.305336"
height = "84.305336mm"
width = "84.135223mm">
<defs>
<style>
.logo{
stroke-dasharray: 800;
stroke-dashoffset: 0;
-webkit-animation: dash 2s linear forwards;
}
@-webkit-keyframes dash {
from {
stroke-dashoffset: 800;
}
to {
stroke-dashoffset: 0;
}
}
</style>
</defs>
<path class = "logo"
id = "logo"
d = "m 70.303571,78.340773 c -4.032971,0.006 -8.033187,1.698025 -10.862132,4.572387 -2.828946,2.874362 -4.455685,6.891674 -4.445904,10.924637 0.0095,3.927963 1.572604,7.841853 4.315065,10.653953 2.74246,2.8121 6.641232,4.47709 10.569138,4.45364 4.633366,-0.0277 9.108311,-2.43049 12.384652,-5.70683 3.574526,-3.57453 6.411017,-6.242046 9.347584,-9.825986 0,0 7.17598,-6.918764 10.743336,-10.51178 3.56737,-3.593016 7.41006,-7.169152 11.08478,-10.843875 3.34645,-3.346446 6.32139,-6.581106 9.51049,-9.812482 3.3753,-3.420038 5.15813,-7.12199 5.18334,-11.661986 0.0216,-3.889398 -1.60848,-8.155743 -4.38434,-10.880165 -2.77587,-2.724421 -6.6563,-4.279784 -10.54572,-4.261811 -3.8759,0.01791 -7.72562,1.595418 -10.48769,4.314587 -2.762056,2.71917 -5.002206,6.149863 -4.776456,11.428746 -0.0484,4.514439 2.874106,9.098792 5.148056,11.372746 3.19237,3.192372 6.9848,6.227335 10.17717,9.419709 3.20164,3.201638 6.0452,5.990107 9.58187,9.526778 1.80732,1.807321 3.93629,5.149881 4.68721,7.593023 0.75092,2.443141 1.01197,5.054051 0.5999,7.576553 -0.55185,3.378163 -2.33545,6.072793 -4.93781,8.296363 -2.60235,2.22358 -5.80201,3.69214 -9.22483,3.7206 -4.69281,0.039 -9.04011,-1.51725 -12.0905,-4.81311 -3.187696,-3.44421 -7.211206,-7.037566 -10.268806,-10.463896 -3.057595,-3.42633 -6.28628,-6.607684 -9.408672,-9.762441 -3.174881,-3.207791 -7.386446,-5.316042 -11.899731,-5.30936 z"
style = "fill:none;fill-opacity:1;stroke:#febc00;stroke-width:10.80000019;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</svg>
Я выполнил инструкции в это видео. Даже попытался добавить дополнительную строку style, как он это сделал в видео, скопировав вставку style изнутри path. Я не уверен, что имеет значение, где находятся эти атрибуты.
<style type = "txt/css">
.logo{fill:none;fill-opacity:1;stroke:#febc00;stroke-width:10.80000019;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1}
но это не сработало :( Если я оставлю строку выше и удалю style из path, все атрибуты будут потеряны, поэтому я предполагаю, что он не может ссылаться на них так, как он делает в видео. Я не уверен, что не так этот раз.
исходный код html просто
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8"/>
<meta http-equip = "X-UA-Compatible" content = "IE=edge, chrome=1">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title> SVG Line Animation Demo</title>
</head>
<body>
<div style = "text-align: center; padding: 150px 0;">
<object>
<embed src = "path.svg">
</object>
</div>
</body>
</html>
@DavidPartyka, я использую Chrome, я думаю, что webkits зависит от Chrome. Но да, я проверил, на всякий случай ключевые кадры не работают ни в Chrome, ни в IE.
—
08.06.2018 17:11
Измените значение stroke-dashoffset в классе .logo на 800, затем удалите "из" внутри правила @keyframes.
—
08.06.2018 17:17
Что-нибудь случится, если вы внесете весь код svg в свой шаблон?
—
08.06.2018 17:19
@DavidPartyka по-прежнему ничего: <
—
08.06.2018 17:24
@ git-e-up, я не уверен, что это правильно. Копирую, вставляю весь код и помещаю в теги <object> вместо embed, это ничего не меняло
—
08.06.2018 17:25
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
6
1 385
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Строка-dasharray: none, которую вы установили на пути, отменяет и предотвращает анимацию. Удаление этого исправляет.
Я также удалил биты webkit, поэтому теперь он должен работать в других браузерах.
<?xml version = "1.0" encoding = "UTF-8" standalone = "no"?>
<svg xmlns = "http://www.w3.org/2000/svg" id = "svg1" version = "1.1" viewBox = "49.595489 30.040314 84.135223 84.305336" height = "84.305336mm" width = "84.135223mm">
<defs>
<style>
.logo{
stroke-dasharray: 800;
stroke-dashoffset: 0;
animation: dash 2s linear forwards;
}
@keyframes dash {
from {
stroke-dashoffset: 800;
}
to {
stroke-dashoffset: 0;
}
}
</style>
</defs>
<path class = "logo"
id = "logo"
d = "m 70.303571,78.340773 c -4.032971,0.006 -8.033187,1.698025 -10.862132,4.572387 -2.828946,2.874362 -4.455685,6.891674 -4.445904,10.924637 0.0095,3.927963 1.572604,7.841853 4.315065,10.653953 2.74246,2.8121 6.641232,4.47709 10.569138,4.45364 4.633366,-0.0277 9.108311,-2.43049 12.384652,-5.70683 3.574526,-3.57453 6.411017,-6.242046 9.347584,-9.825986 0,0 7.17598,-6.918764 10.743336,-10.51178 3.56737,-3.593016 7.41006,-7.169152 11.08478,-10.843875 3.34645,-3.346446 6.32139,-6.581106 9.51049,-9.812482 3.3753,-3.420038 5.15813,-7.12199 5.18334,-11.661986 0.0216,-3.889398 -1.60848,-8.155743 -4.38434,-10.880165 -2.77587,-2.724421 -6.6563,-4.279784 -10.54572,-4.261811 -3.8759,0.01791 -7.72562,1.595418 -10.48769,4.314587 -2.762056,2.71917 -5.002206,6.149863 -4.776456,11.428746 -0.0484,4.514439 2.874106,9.098792 5.148056,11.372746 3.19237,3.192372 6.9848,6.227335 10.17717,9.419709 3.20164,3.201638 6.0452,5.990107 9.58187,9.526778 1.80732,1.807321 3.93629,5.149881 4.68721,7.593023 0.75092,2.443141 1.01197,5.054051 0.5999,7.576553 -0.55185,3.378163 -2.33545,6.072793 -4.93781,8.296363 -2.60235,2.22358 -5.80201,3.69214 -9.22483,3.7206 -4.69281,0.039 -9.04011,-1.51725 -12.0905,-4.81311 -3.187696,-3.44421 -7.211206,-7.037566 -10.268806,-10.463896 -3.057595,-3.42633 -6.28628,-6.607684 -9.408672,-9.762441 -3.174881,-3.207791 -7.386446,-5.316042 -11.899731,-5.30936 z"
style = "fill:none;fill-opacity:1;stroke:#febc00;stroke-width:10.80000019;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" />
</svg>!!!!!!!!!! OMGTHANKYOU !!!!!!!!!! Вы не представляете, сколько вещей я пробовал, но ни одна из них не сработала TT ... Вы гений TT ... Поэтому всякий раз, когда я хочу анимировать какую-то часть svg, я должен убедиться, что это не часть style уже, чтобы он не перезаписывался?
—
08.06.2018 17:32
вам просто нужно учитывать специфику CSS, чтобы вы не заменяли свою анимацию чем-то более конкретным.
—
08.06.2018 17:39
Другие вопросы по теме
Обнаружение окончания анимации javascript
Преобразование счетчика в css-анимации
Анимация движущихся объектов arrayylist
Файл анимации Matplotlib не воспроизводится при прерывании программы Python
Как заставить анимацию не заикаться и работать вечно?
Переход общего элемента между двумя действиями не подходит
Добавить эффект тени при наведении курсора на блоки DIV
Цветовой переход в эффекте наведения кнопки с использованием стиля в WPF
Как представить UIView снизу до половины экрана в Swift3 iOS?
Попытка создать анимированную радарную диаграмму в python plot.ly
Похожие вопросы
Как исправить конфликт CSS
Ошибка центрирования ввода на этикетке
Связывание (тег привязки) внутри файла CSS
Обнаружение окончания анимации javascript
Отрисовка пользовательских стилей в bootstrap-vue
Почему мой индикатор выполнения HTML-CSS теряет цвет?
При наведении курсора на div, div перемещается до нижней трети div
Переместить значки FontAwesome ВНЕ li
Пользовательский интерфейс чата для ionic3 с диалоговым потоком
Загрузчик CSS / Спиннер Progress Material angular 2+
Вы пробовали использовать старые простые @keyframes вместо @ -webkit-keyframes? Версия webkit не будет работать во всех браузерах.