如何在 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

Dash-arrayoffset 动画

**在 IE 中不起作用**，即使 [文档][1] 确实说它的 css 动画 所以 **[Harry][2]** 将其转换为使用 dash-array 。

我很尊重这个过程：animation: t1 1s ease-out reverse forwards;

你为什么要这样做？ 因为当动画在 IE 中失败时，它会回到它的初始值。 旧的初始值为：stroke-dasharray: 351.68;
这是圆圈的 0%
新的初始值为：stroke-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>

Answer 2

正如你所说，“SMIL 似乎不是你的问题”——这背后的原因是因为 IE 不支持 SVG SMIL 动画——你可以在这里看到http://caniuse.com/#search=svg%20animation

您会满意显示整个图表（即圆圈和带有百分比的蓝色条），还是只显示不带圆圈的百分比？