边框图像gif无法为Edge 42中的svg设置动画

Question

我正在使用gif文件在svg元素周围使用css border-image显示动画边框。

#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。

一件有趣的事情，如果我通过开发工具选择元素，图像就会开始动画。无法找出解决方案

要复制的网址：https://plnkr.co/edit/IeVQf7mjTJuPdwFckumf?p=preview

Answer 1

您实际上不必使用图像即可达到此效果。我的答案is a talk from Lea Verou.

的来源

请注意，如果您在无法正常运行的网站上运行此代码，则必须对其进行编码。我选择使其更具可读性，但要查看实际效果，您必须将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>