Javascript 使用GSAP将SVG元素插入DOM

我正在尝试使用TweenMax和TimelineMax在一个页面上设置几个

圆圈
元素的动画。实际的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

如果您查看这个CodePen示例，您可以看到我正在使用JavaScript动态创建SVG
标记。然后我用GSAP stagger设置动画


代码笔编辑器模式下的示例：


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

CreateElements：

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);
}

var$box=document.getElementById（“box”）；//主SVG标记
var svgNS=”http://www.w3.org/2000/svg";
var circleCount=25；
对于（变量i=0；i