这是我目前所拥有的，问题是每次生成 svg 时，它们不会堆叠在一起以形成动画的错觉，而是彼此堆叠或堆叠在下方，确实有人知道怎么修这个东西吗？还有人知道如何让圆圈从容器底部而不是顶部出现吗？提前致谢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Animation</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
</style>
</head>
<body>
</svg>
<script>
var height1 = 0;
for (let height1 = 0; height1 < 20; height1 ++) {
setTimeout(function timer(){
console.log(height1)
//make SVG container
var svgContainer = d3.select("body").append("svg")
.attr("width", 100)
.attr("height", height1);
//Draw circle
var circle = svgContainer.append("circle")
.attr("cx", 50)
.attr("cy", 50)
.attr("r", 50);
}, height1*500)
}
</script>
</body>
</html>
最佳答案
无论您尝试做什么(一点都不清楚，主要是因为有许多替代方法可以正确创建动画)，您的代码的问题在于您在每个循环中附加一个新的 SVG。
取而代之的是，仅附加一次 SVG 并更改其高度:
var height1 = 0;
var svgContainer = d3.select("body").append("svg")
.attr("width", 100);
for (let height1 = 0; height1 < 20; height1++) {
setTimeout(function timer() {
//make SVG container
svgContainer.attr("height", height1);
//Draw circle
var circle = svgContainer.append("circle")
.attr("cx", 50)
.attr("cy", 50)
.attr("r", 50);
}, height1 * 500)
}<script src="https://d3js.org/d3.v4.min.js"></script>另一方面，如果你真的想在每个循环中附加一个 SVG 并最终得到一堆彼此叠加的 SVG(无论出于何种原因，这不是我判断的地方)，那么你必须使用position:absolute位置:
var height1 = 0;
for (let height1 = 0; height1 < 20; height1++) {
setTimeout(function timer() {
//make SVG container
var svgContainer = d3.select("body").append("svg")
.attr("width", 100)
.attr("height", height1);
//Draw circle
var circle = svgContainer.append("circle")
.attr("cx", 50)
.attr("cy", 50)
.attr("r", 50);
}, height1 * 500)
}svg {
position: absolute;
}<script src="https://d3js.org/d3.v4.min.js"></script>关于javascript - 如何将使用 javascript 从 for 循环生成的 svg 堆叠在一起？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44651667/