Can I hide certain parts of a svg element behind another?

Question

So I have the svg file which I want to animate using SMIL:

 <svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="2000" height="500" fill="grey" fill-opacity="0.5"/>
<rect x="800" y="50" width="400" height="400" fill="#ffffff" fill-opacity="1"/>
<path d="M-52.81,64.09 C153.43,212.09 349.81,-49.99 500.30,78.09 L500.00,150.00 L0.00,150.00 Z" style="stroke: none; fill: #45a9fa" transform="translate(750 80)">
<animateTransform
attributeName="transform" type="translate"
from="550 80"
to="850 80"
dur="1s"
repeatCount="indefinite"
/>
</path>    
</svg>

and want to basically animate the 'wave' path inside the window so it looks like it has a continuous motion. I tried nesting multiple svgs but that did not work because the innermost svg will be painted first and thus everything else will be painted over it. And so I thought this could maybe work but it seems like I cannot use the 'transform: translate' in an animation. Is there a way to hide the edges of the wave like layers so I can only show the wave moving as if behind a window inside the outer rectangle?

PS: I cannot use CSS or JavaScript, just standard svg.

Answer 1

Use a clipping path (or mask) to hide the edges.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 500">
    <defs>
        <clipPath id="clip">
            <path d="M-52.81,64.09 C153.43,212.09 349.81,-49.99 500.30,78.09 L500.00,150.00 L0.00,150.00 Z" style="stroke: none; fill: #45a9fa" transform="translate(750 80)">
        </clipPath>
    </defs>
    <rect x="0" y="0" width="2000" height="500" fill="grey" fill-opacity="0.5"/>
    <rect clip-path="url(#clip)" x="800" y="50" width="400" height="400" fill="#FFF" fill-opacity="1"/>        
    </path>   
    <animateTransform attributeName="transform" type="translate" from="550 80" to="850 80" dur="1s" repeatCount="indefinite"/>
</svg>
 

Now when you translate the path only shows within the white rect element.