Dash-arrayoffset动画

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中完全动画，只要它只显示整个内容。

如果我想创建一个跨浏览器的解决方案，或者我应该添加一些东西来实现IE中所需的（甚至部分期望的）结果，我是否应该远离SVG？我很感激任何建议。

Answer 1

Dash-arrayoffset动画

在IE中不起作用，即使documentation确实说明其css可动画
因此 Harry 将其转换为使用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

正如你所说，＆＃39; SMIL似乎不适合你的问题＆＃39; - 这背后的原因是因为IE不支持SVG SMIL动画 - 正如你在这里看到的http://caniuse.com/#search=svg%20animation

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

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

2 个答案:

Dash-arrayoffset动画