使用 GSAP 将 SVG 元素复制到 DOM 中答案

【问题标题】：Insert copies SVG elements into DOM with GSAP使用 GSAP 将 SVG 元素复制到 DOM 中
【发布时间】：2025-12-17 13:50:01
【问题描述】：

我正在尝试使用 TweenMax 和 TimelineMax 为页面上的多个 circle 元素设置动画。实际的 SVG 只有这个特定 circle 元素的一个实例，但我希望动画序列能够用相同的指定转换为其中几个相同的元素设置动画。

是否可以“复制”一个 SVG 元素并执行交错动画？

例如：

function makeFiveCopies() {
  // return array of five identical 'circle' elements
}

var circles = makeFiveCopies($('circle'));

var tl = new TimelineMax();

tl.staggerTo(circles, 2, { yPercent: 300 });

tl.play();

是否可以用 Greensock 做类似的事情，还是我必须使用 SVG 编辑器将元素的几个相同副本实际插入到 SVG 中？

http://codepen.io/himmel/pen/qOmpGm

【问题讨论】：

标签： javascript jquery gsap

【解决方案1】：

如果您查看此 CodePen 示例，您会发现我正在使用 JavaScript 动态创建 SVG <circle> 标签。而不是我用 GSAP 交错动画它。

http://codepen.io/jonathan/full/EVgYbB

codepen 编辑器模式下的示例：

http://codepen.io/jonathan/pen/EVgYbB

您必须使用 createElementNS 而不是 createElement，因为 SVG 要求您指定命名空间 URI。

createElementNS：https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS

createElement：https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

HTML：

<svg id="box"></svg>

这只是循环中的一个例子，JS：

var $box = document.getElementById("box"); // main SVG tag
var svgNS = "http://www.w3.org/2000/svg";

var circleCount = 25;    

for (var i = 0; i < circleCount; i++) {

   var circle = document.createElementNS(svgNS, 'circle');

   var r = (i + 2) * 4;
   var cx = mainW;
   var cy = mainH;

   circle.setAttributeNS(null, "id", "circle" + i);
   circle.setAttributeNS(null, "cx", cx);
   circle.setAttributeNS(null, "cy", cy);
   circle.setAttributeNS(null, "r", r);

   $box.appendChild(circle);
}

【讨论】：