Question

由于特殊原因，我正在开发的项目需要使用Safari的webarchive功能。我正在使用简化版this pen作为进度条。可以看到更简单的代码here及以下。

如果此页面保存为webarchive，则进度条会在其下方重复显示。如果它是动画的，它下面的'ghost'是不活动的。我想知道是否有一个解决方法，所以没有重复。任何更改可见性设置的尝试，例如隐藏或显示：无失败。

编辑：我现在通过使用引导进度条来绕过这个问题。

       <!DOCTYPE html>
<html lang="en"><head>
    <meta charset="utf-8">


 <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
#play-progress {
  width: 400px;
  margin-bottom: 10px;
  margin-top:10px;
  margin-left:20px;
  background-color: brown;
  height: 36px;
  position: relative;
  border-radius: 20px;
}

#play-svg {
  border-radius: 20px;
}

#progress-bar {
  fill:blue;
}
</style>
  </head>

  <body role="document">

  <div id= "play-progress"> </div> 

<script>

//Progress bar
var data_index = 0;
var progress_width = 400;
var speed = 650;
var animation;

// add the progress bar svg
var progress = d3.select("#play-progress").append("svg:svg")
  .attr("id","play-svg")
  .attr("width", progress_width)
  .attr("height", 36);
// append a rect, which will move to the right as the animation plays
// this creates the progress bar effect
progress.append("rect")
  .attr("id","progress-bar")
  .attr("width", progress_width)
  .attr("height", 36)
  .attr("x",0)
  .attr("y",0);

function setProgressWidth(num) {
    progress_width = 400;
    document.getElementById("progress-bar").style.width = num;
}

</script>
</body>
</html>

D3 svg元素在Safari webarchive中重复

0 个答案: