As far as I'm aware, there isn't any particular way of doing depth in SVG. Elements are drawn in the order they appear, so if something needs to go behind something else, it must be earlier in the document.

I'm trying to create an animation, which for simplicity let's say it's the Earth orbiting the Sun. Doing this from above would be easy enough, just follow a circular path. However I want to have it viewed from a quite shallow angle, so the Earth would be going behind the Sun.

My current idea is to have two Earths, one before and one after the Sun. Something like...

<use xlink:href="#earth" />
<use xlink:href="#sun" />
<use xlink:href="#earth" />

Then I animate the two Earths, one going right-to-left and the other left-to-right, and alternating their visibility to only appear half the time. With the appropriate timing, this results in a single Earth being seen to orbit the Sun.

Honestly I quite like this idea, but I'm just wondering if anyone knows of a better way to do this kind of "3D-like" thing.

CodePudding user response：

You can create two sibling <g> elements (call them topLayer / bottomLayer or alike), and then move your planet elements from one layer to another without duplicating them

CodePudding user response：

Why have two of the complicated things? It would be much easier to have two suns. Animate your earth on a continuous elliptical path. Then switch between your two suns at the right times.