点击使用javascript而不是jQuery播放和反转GSAP动画

Question

我创建了以下GSAP动画，我想让它在我单击svg元素时运行并在我再次单击时反转。我不想使用jQuery。

var svg = document.getElementsByTagName("svg"),
tl = new TimelineMax();

tl.fromTo("#path1", 1,{drawSVG:"0% 25%"}, {drawSVG:"30% 100%", delay:3})
 .to("#path1", .8,{drawSVG:"63% 100%"}, "-=0.15")
 .to("#pathLine1", .8, {x:10 , y:5 ,   opacity:0 , ease:Power1.ease}, "-=1.4")
 .to("#pathLine2", .8, {x:-10 , y:5 ,   opacity:0 , ease:Power1.ease}, "-=1.4");

这是codepen链接

http://codepen.io/anon/pen/bwpbBV

我尝试在我的时间轴代码之后添加它，但它不起作用

svg.onclick = function() {
 tl.reversed() ? tl.play() : tl.reverse();
}

干杯