Thank you for your response and the article by Souidan.
I will try to clarify. I need to make a series of banner formats. By using an SVG I can export a bunch of objects and have them positioned without too much difficulty because they are inside an SVG. I like to use SVG's if I can to keep filesize down and not have to worry about sizes and scaling.
With this animation I am trying to make it look like snow falling from the sky to the ground. As you said I need the square to behave like a DOM element not in the SVG coordinate space. This way the square will go just barely outside the green square, then I can reset the position and play it over.
I actually thought of a way to do it while writing this post.. By scaling the animation equal to the difference between the DOM and the SVG coordinate system, and it is an okay solution. I edited the codepen to show what I mean:
I am still wondering if there is an easier ways to do such such a manipulation. I am also doing some heavy calculations while the animation is running. I might have to think of a way to do it beforehand.. oh and also read Souidans article. Thanks!