IE/Edge 内嵌动画 SVG 未加载

Question

我一直在尝试创建一个与此处示例不太相似的圆环图：https://jsfiddle.net/4azpfk3r/

HTML:

<div class="item html">
 <h2>HTML</h2>
   <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
     </g>
    </svg>
</div>

<div class="item css">
    <h2>CSS</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#69aff4" fill="none"/>
     </g>
    </svg>
</div>

CSS

.item {
    position: relative;
    float: left;
}

.item h2 {
    text-align:center;
    position: absolute;
    line-height: 125px;
    width: 100%;
}

svg {
    transform: rotate(-90deg);
}

.circle_animation {
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
}

.html .circle_animation {
    -webkit-animation: html 1s ease-out forwards;
    animation: html 1s ease-out forwards;
}

.css .circle_animation {
    -webkit-animation: css 1s ease-out forwards;
    animation: css 1s ease-out forwards;
}

@-webkit-keyframes html {
  to {
    stroke-dashoffset: 80;
  }
}

@keyframes html {
  to {
    stroke-dashoffset: 80;
  }
}

@-webkit-keyframes css {
  to {
    stroke-dashoffset: 160;
  }
}

@keyframes css {
  to {
    stroke-dashoffset: 160;
  }
}

但是，在上面的示例和我修改后的版本中，我在 IE 11 和 Edge 中遇到了问题运行。我相当确定这是由于 stroke-dashoffset 上的动画所致，但我不确定是否有任何解决方法。

注意：我已经尝试按照一些类似问题的建议添加下面的行，但这并没有改变行为

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Answer 1

IE11 不支持 CSS SVG 元素的动画。因此，如果您想支持非 Edge IE，则需要使用不同的方法。

但是 Edge 自 build 10240 以来支持 CSS SVG 元素的动画。

您的动画在 Edge 上不起作用的原因是因为 Edge 坚持要包含具有 CSS 值的单位。其他浏览器对 SVG 值更宽容。

因此，要修复，请将 px 添加到所有 dasharray 和 dashoffset 值中。

.circle_animation {
  stroke-dasharray: 440px;
  stroke-dashoffset: 440px;
}

@keyframes html {
  to {
    stroke-dashoffset: 80px;
  }
}

.item {
    position: relative;
    float: left;
}

.item h2 {
    text-align:center;
    position: absolute;
    line-height: 125px;
    width: 100%;
}

svg {
    transform: rotate(-90deg);
}

.circle_animation {
  stroke-dasharray: 440px;
  stroke-dashoffset: 440px;
}

.html .circle_animation {
    -webkit-animation: html 1s ease-out forwards;
    animation: html 1s ease-out forwards;
}

.css .circle_animation {
    -webkit-animation: css 1s ease-out forwards;
    animation: css 1s ease-out forwards;
}

@-webkit-keyframes html {
  to {
    stroke-dashoffset: 80px;
  }
}

@keyframes html {
  to {
    stroke-dashoffset: 80px;
  }
}

@-webkit-keyframes css {
  to {
    stroke-dashoffset: 160px;
  }
}

@keyframes css {
  to {
    stroke-dashoffset: 160px;
  }
}

<div class="item html">
    <h2>HTML</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
     </g>
    </svg>
</div>

<div class="item css">
    <h2>CSS</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#69aff4" fill="none"/>
     </g>
    </svg>
</div>

IE/Edge 内嵌动画 SVG 未加载

Inline Animated SVG not loading in IE/Edge

css

internet-explorer

svg

microsoft-edge