html - 如何在 IE 中显示 SVG 圆环图？

Question

我创建了一个非常漂亮的动画图表，看起来像 this .

<div>Some percentage</div>
<div class="bigbox">
  <div class="centered">
    <div class="item t1">
      <div class="graphicsContent">51%</div>
      <svg width="144px" height="144px" xmlns="http://www.w3.org/2000/svg">
        <g>
          <title>Layer 1</title>
          <circle id="circle1" class="circle_animation" r="56" cy="72" cx="72" stroke-width="16" stroke="blue" fill="none"/>
        </g>
        <g>
          <circle id="innerCircle1" r="44" cy="72" cx="72" stroke-width="2" stroke="#b1b1b1" fill="none"/>
        </g>
      </svg>
    </div>
  </div>
</div>

如您所见，我使用了 SVG。除了 IE 之外，它似乎在其他地方都可以正常工作。我读到 IE 有很多关于 CSS3 动画的问题。 SMIL似乎并没有解决我的问题。我什至不关心该图形在 IE 中是否完全动画，只要它只显示全部内容即可。

如果我想创建一个跨浏览器解决方案，我应该远离 SVG 还是应该添加一些东西来在 IE 中实现所需的(甚至部分所需的)结果？我将不胜感激任何建议。

Answer 1

短划线数组偏移动画

**在 IE 中不起作用**，即使 [文档][1] 确实说明其 css 可动画 因此 **[Harry][2]** 将其转换为使用破折号数组。

我用以下方法反转了整个过程:animation: t1 1s escape-out backforwards;

你为什么要这么做？ 因为当 IE 中的动画失败时，它会返回到其初始值。 旧的初始值为:strike-dasharray: 351.68;
这是圆的 0%
新的初始值为:strike-dasharray: 170.7, 351.68;
这大约是圆的 51%。

.bigbox {
  width: 50%;
}
.item {
  position: relative;
}
.graphicsContent {
  text-align: center;
  position: absolute;
  line-height: 144px;
  width: 100%;
  font-size: 1.250em;
}
svg {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.circle_animation {
  stroke-dasharray: 170.7, 351.68;
}
.t1 .circle_animation {
  -webkit-animation: t1 1s ease-out reverse forwards;
  animation: t1 1s ease-out reverse forwards;
}
@-webkit-keyframes t1 {
  0% {
    stroke-dasharray: 170.7, 351.68;
  }
  100% {
    stroke-dasharray: 0, 351.68;
  }
}
@keyframes t1 {
  0% {
    stroke-dasharray: 170.7, 351.68;
  }
  100% {
    stroke-dasharray: 0, 351.68;
  }
}

<div>Some percentage</div>
<div class="bigbox">
  <div class="centered">
    <div class="item t1">
      <div class="graphicsContent">51%</div>
      <svg width="144px" height="144px" xmlns="http://www.w3.org/2000/svg">
        <g>
          <title>Layer 1</title>
          <circle id="circle1" class="circle_animation" r="56" cy="72" cx="72" stroke-width="16" stroke="blue" fill="none" />
        </g>
        <g>
          <circle id="innerCircle1" r="44" cy="72" cx="72" stroke-width="2" stroke="#b1b1b1" fill="none" />
        </g>
      </svg>
    </div>
  </div>
</div>