#html #css #svg #jquery-animate
#HTML #css #svg #jquery-анимировать
Вопрос:
Проблема в SVG-файле спрайтов, который я создал с помощью Illustrator CC2020, мой svg-файл не работает, но он работает с другой svg-анимацией.
Я думаю, что в моем SVG-файле есть бесполезный код (я очистил его с помощью онлайн-инструментов), но проблема сохраняется, есть идеи.
Мой код с ошибкой animate:
.emoji {
width: 110px;
display: inline-flex;
background-image: url(http://promedia.tonohost.com/perfect-ani.svg);
background-size: auto 100%;
animation: moveX 1s steps(90) infinite;
}
.emoji::before {
content: "";
padding-top: 100%; /* keep the square ratio */
}
@keyframes moveX {
to {
background-position: right; /* you only need to move to right */
}
}
<div class="emoji"></div>
<div class="emoji" style="width:50px"></div>
Код, работающий с svg-спрайтом:
.emoji {
width: 110px;
display: inline-flex;
background-image: url(https://s.pinimg.com/webapp/style/images/wow-0a7ea725.svg);
background-size: auto 100%;
animation: moveX 1s steps(90) infinite;
}
.emoji::before {
content: "";
padding-top: 100%; /* keep the square ratio */
}
@keyframes moveX {
to {
background-position: right; /* you only need to move to right */
}
}
<div class="emoji"></div>
<div class="emoji" style="width:50px"></div>
Ошибка SVG кода ссылки:
Комментарии:
1. в первом примере элемент svg это тоже высота. Попробуйте изменить атрибут viewBox на что-то вроде
viewBox="0 56 595.3 7"
2. и у вас есть ровно 90 изображений в вашем SVG?
3. Ну, основная причина, по которой ваша демонстрация здесь не работает, заключается в том, что браузер показывает ошибку с выборкой «perfect-ani.svg». Chrome показывает «сбой) net:: ERR_SSL_PROTOCOL_ERROR». Могут быть и другие ошибки, но пока вы не устраните эту проблему, мы не сможем помочь. SVG-файл загружается напрямую по URL-адресу, но не при использовании в этом фрагменте кода.
4. Спасибо за вашу помощь, я собираюсь просмотреть атрибуты файла svg.
5. @PaulLeBeau stackoverflow портал добавить автоматизировать протокол httpS для файла svg.