Круг SVG не анимирован в Edge

Приведенный ниже svg отлично анимируется во всех браузерах, кроме Edge (сюрприз!).

<svg width="80" height="24" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="#555">
    <circle cx="15" cy="15" r="15">
        <animate attributeName="r" from="15" to="15"
                 begin="0s" dur="0.8s"
                 values="15;9;15" calcMode="linear"
                 repeatCount="indefinite" />
        <animate attributeName="fill-opacity" from="1" to="1"
                 begin="0s" dur="0.8s"
                 values="1;.5;1" calcMode="linear"
                 repeatCount="indefinite" />
    </circle>

</svg>

Я попытался добавить px в качестве единиц измерения, но безуспешно.

Спасибо за ваши советы!


svg animation microsoft-edge svg-animate
person injecteer    schedule 08.04.2020    source источник
comment
Это действительно неожиданно, потому что в последней версии используется тот же механизм рендеринга, что и в Chrome. Так что, если он работает в Chrome, он также работает в текущей версии Edge.   -  person cloned    schedule 08.04.2020
comment
@cloned, только что проверил: в FF и Chrome анимация просто прелесть, в краевой сборке 18362 svg все еще мертв   -  person injecteer    schedule 08.04.2020
comment
Это должно работать (caniuse.com/#feat=svg-smil). Убедитесь, что у вас новый Edge (с логотипом волны), а не старый Edge (с синим логотипом e). Старый Edge не поддерживал элементы анимации SVG SMIL.   -  person Paul LeBeau    schedule 08.04.2020
comment
ну ни в чем не могу быть уверен, так как это клиентские браузеры и я не могу их контролировать. Моя собственная пограничная версия — это Microsoft Edge 44.18362.449.0   -  person injecteer    schedule 08.04.2020
comment
leunen.me/fakesmile/faq.html позволяет Edge поддерживать SMIL, поскольку у него нет собственной поддержки .   -  person Robert Longson    schedule 08.04.2020
comment
@RobertLongson, анимация на leunen.me/fakesmile/index.html в краю не двигается. ..   -  person injecteer    schedule 08.04.2020

Ответы (2)


arrow_upward
1
arrow_downward

Я пытаюсь проверить ваш код и обратиться к документации MDN.

Я вижу, что вы используете атрибуты animate, attributeName, from, to, dur в своем коде.

Animate поддерживается в версии Edge ‹=79.

В то время как совместимость неизвестна для attributeName, from, to, dur

введите здесь описание изображения

Ссылка:

SVG Animate

Я думаю, что это причина, по которой ваш код не работает в устаревшем браузере MS Edge.

Я предлагаю вам порекомендовать вашим клиентам использовать браузер MS Edge Chromium, или вы можете удалить анимацию или показать изображение вместо анимации, чтобы избежать этой проблемы.

person Deepak-MSFT    schedule 08.04.2020

arrow_upward
0
arrow_downward

Прочитав комментарии и ответы, я решил использовать чистую анимацию CSS вместо SVG. Я взял код с сайта https://projects.lukehaas.me/css-loaders/. и мое "решение" выглядит так:

<style>
.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.2em;
  height: 2.2em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.3s infinite ease-in-out;
  animation: load7 1.3s infinite ease-in-out;
}
.loader {
  color: #888;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.2em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.2em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.2em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.2em 0 0;
  }
}
</style>

<div class="loader">Loading...</div>
person injecteer    schedule 08.04.2020
comment
Спасибо, что опубликовали решение этой проблемы. Я предлагаю вам попробовать отметить свой ответ на этот вопрос через 48 часов, когда он будет доступен для отметки. Это может помочь другим членам сообщества в будущем в подобных вопросах. Спасибо за понимание. - person Deepak-MSFT; 08.04.2020