Элемент s3g D3 дублируется в веб-архиве Safari
По определенным причинам в проекте, над которым я работаю, необходимо использовать функцию веб-архива Safari. Я использую упрощенную версию этого пера для индикатора выполнения. Более простой код можно увидеть здесь и ниже.
Если эта страница сохранена как веб-архив, индикатор выполнения дублируется ниже самого себя. Если он анимирован, то "призрак" под ним неактивен. Мне было интересно, есть ли обходной путь к этому, чтобы не было дубликата. Любая попытка изменить настройки видимости, например скрытие или отображение: ни одна попытка не удалась.
Изменить: я обошел проблему на данный момент, используя вместо этого индикатор выполнения начальной загрузки.
<!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>