Анимация SVG-спрайтов не работает, когда файл был экспортирован illustrator

#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 кода ссылки:

http://promedia.tonohost.com/perfect-ani.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.