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中运行它们。我相当肯定这是由于中风 - dashoffset上的动画，但我不确定是否有任何解决方法。

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

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

Answer 1

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

然而，自构建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;
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

内联动画SVG未在IE / Edge中加载

1 个答案: