堆叠SVG和动画

时间:2016-01-26 17:57:21

标签: javascript svg jquery-svg svg-animate

我还在学习很多编码,但是我一直在考虑SVG堆叠等问题。

我正在尝试创建一个包含所有部件的计算机图形,这些图形可以动画显示各个部分。现在,创建一个包含所有所需图层的SVG文件并单独为图层设置动画,或者使用已经分离的文件并将它们放在彼此之上会更容易吗?

我目前将它们放在单独的文件中,每当我查看如何将它们堆叠在同一位置时,我会获得有关如何将它们堆叠在一个文件中并将它们分散到网站上不同位置的教程,正好相反我想做什么

我真的没有任何代码需要显示,因为我不确定如果我希望它们堆叠在一起,我应该如何将SVG加载到html中。任何帮助将不胜感激!

1 个答案:

答案 0 :(得分:0)

看看CSS中的绝对位置。您可以在此处找到有关CSS定位的信息:http://www.w3schools.com/css/css_positioning.asp

我建议使用设置为position: relative的div包装图像并自行生成图像position: absolute。这样,他们就会堆叠在一起。

为确保正确的堆栈顺序,您可以使用z-index CSS属性。

设置好布局后,您可以使用JavaScript(我建议使用JQuery,但也可以通过常规JavaScript实现),以动态显示和隐藏每个单独的图像。