GIF-изображение границы не анимируется для SVG в Edge 42 - PullRequest
Новая
       14

GIF-изображение границы не анимируется для SVG в Edge 42

1 голос
/ 21 мая 2019

Я использую gif-файл для отображения анимированной границы, используя css border-image вокруг элемента svg. 

#animated-gif-container {
  width: 48px;
  height: 48px;
  border: 2px solid;
  border-image: url(https://s3.gifyu.com/images/practiceHighlighBorder.gif) 2 round;
}
<svg id="animated-gif-container"></svg>

Это хорошо работает в Chrome, Firefox, но не в Edge (Версия 42)

Проверено, что он работает и в Edge 20. Проверено, это работает и для элемента div. Однако я не могу изменить его на div из-за зависимости в коде.

Одна интересная вещь, если я выбираю элемент с помощью инструмента dev, изображение начинает анимироваться. Не в состоянии найти решение

enter image description here

URL для воспроизведения: https://plnkr.co/edit/IeVQf7mjTJuPdwFckumf?p=preview

1 Ответ

0 голосов
/ 21 мая 2019

Вам не обязательно использовать изображение для достижения этого эффекта. Источником моего ответа является лекция Леа Веру.

Обратите внимание, что если вы запустите это здесь на сайте, оно не будет работать, вам придется его кодировать. Я решил сделать его более читабельным, но чтобы увидеть эффект в действии, вам нужно включить CSS-часть в ссылочную таблицу стилей (например, styles.css), а не просто поместить ее в заголовок вашего сайта. 

.? {
  background: url('data:image/svg+xml,\
  <svg xmlns="http://www.w3.org/2000/svg">\
   <style> @keyframes ants {to {stroke-dashoffset: -15px;}} </style>\
   <rect width="100%" height="100%" style="stroke: black; stroke-width: 4px; fill: none;\
    stroke-dasharray: 10px 5px; animation: ants .4s infinite linear;" /> \
  </svg>');
}
<div class="?" contenteditable> Look at my awesome border</div>
...