内联动画SVG未在IE / Edge中加载 [英] Inline Animated SVG not loading in IE/Edge

问题描述

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

I've been trying to create a donut chart not too dissimilar to this example here: 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中运行它们。我很确定这是由于中风 - dashoffset上的动画，但我不确定是否有任何解决方法。

However, in both the above example, and my altered version I have trouble running them in IE 11 and Edge. I'm fairly certain it is due to the animation on the stroke-dashoffset but I'm not sure if there is any work around.

注意：我已经尝试添加以下一行，因为一些类似的问题已经提出，但这并没有改变行为

Note: I have already tried adding the line below as some similar questions have suggested but this provides no change in the behaviour

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

推荐答案

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

IE11 does not support CSS animations of SVG elements. So you would need to use a different approach if you want to support non-Edge IE.

然而，自构建10240以来，Edge一直支持SVG元素的CSS动画。

However Edge has supported CSS animations of SVG elements since build 10240.

你的动画不适用于Edge的原因是因为Edge坚持要包含带CSS值的单位。其他浏览器对SVG值更宽容。

The reason your animations aren't working on Edge is because Edge insists that you include units with CSS values. Other browsers are more forgiving with SVG values.

所以要修复，将 px 添加到所有的dasharray和dashoffset值。

So to fix, add px to all your dasharray and dashoffset values.

.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>

这篇关于内联动画SVG未在IE / Edge中加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！