Question

我设法大致模拟了我的问题here。

.bigbox {
  width: 50%;
}

.item {
  position: relative;
}

.graphicsContent {
  text-align: center;
  position: absolute;
  line-height: 144px;
  width: 100%;
}

svg {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.circle_animation {
  /*stroke-dasharray: 351.68;*/
}

.t1 .circle_animation {
  -webkit-animation: t1 1s ease-out reverse forwards;
  -moz-animation: t1 1s ease-out reverse forwards;
  animation: t1 1s ease-out reverse forwards;
}

我每隔x秒从服务器接收一次动态百分比值。仅出于演示的目的，我创建了一个值为0到100的随机生成器，每10秒输出一个数字。

$(document).ready(function() {
  /*someRandom();*/

  setInterval(function() {
    someRandom();
  }, 10000);
});

function someRandom() {
  var number = Math.floor(Math.random() * 100);
  $('.graphicsContent').text(number + "%");

  var offsetB1 = (number * 351.68) / 100;

  $(".circle_animation").css("stroke-dasharray", offsetB1 + ", 351.68");

  $.keyframe.define({
    name: 't1',
    '0%': {
      'stroke-dasharray': offsetB1 + ', 351.68'
    },
    '100%': {
      'stroke-dasharray': '0, 351.68'
    }
  });

  $(".t1").playKeyframe({ name: 't1' });
}

动画应对每个变化做出反应。我已经包含了jQuery的关键帧插件来允许这种动态创建。虽然它在Chrome和Firefox中运行良好，但整个行为似乎并不适用于Safari，因此对Apple用户来说会有问题。 IE是一个常见的麻烦制造者，我非常清楚CSS3动画不受支持，但一般的跨浏览器解决方案可以完成这项工作。

欢迎任何帮助和建议（也可能是替代插件）！

带关键帧的动态SVG - Safari问题

0 个答案: