css - 内嵌动画 SVG 无法在 IE/Edge 中加载

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 不支持 SVG 元素的 CSS 动画。因此，如果您想支持非 Edge IE，则需要使用不同的方法。

但是自 build 10240 起，Edge 就支持 SVG 元素的 CSS 动画。

您的动画在 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>