javascript - 无法同时为 2 个对象设置动画

Question

所以我终于设法让我的物体正确移动和旋转。

现在我想同时移动和旋转 2 条线。但是，当创建新行时，较早的行将停止工作。尽管移动和旋转不再起作用，但对象仍然存在，值等仍然正确。

当检索有关 lineObject 的信息时，我得到了它们两个的唯一信息。 移动和旋转函数都被正确调用和循环。

当创建新的属性时，早期的 set 属性似乎被破坏了。

这里出了什么问题？

this.lineObject.setAttribute(parameters); 似乎没有做任何事情。

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

Answer 1

问题在于如何在 Draw 函数中创建线条标签。 当您使用innerHTML时，本质上会重新创建容器的全部内容。这意味着当您绘制第二条线时，您的第一条线将被孤立，并会创建一个新元素来代替它。

相反，您应该使用appendChild。请参阅http://www.w3schools.com/jsref/met_node_appendchild.asp

此外，当您创建行元素时，请查看 add a new line in svg, bug cannot see the line 否则你的线条将是不可见的。