2

由于特殊原因，我正在处理的项目需要使用 Safari 的 webarchive 功能。我正在使用这支笔的简化版本作为进度条。更简单的代码可以在这里和下面看到。

如果此页面保存为 webarchive，进度条会在其下方复制。如果它是动画的，它下面的“幽灵”是不活动的。我想知道是否有解决方法，所以没有重复。任何更改可见性设置的尝试，例如 hidden 或 display:none 都失败了。

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

       <!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>
4

0 回答 0