SVG Cross Browser (Firefox) Issues - firefox

Question

I tried to adapt a codepen thing for waves with svgs.
Works just fine in Chrome, Safari and Edge, but not in Firefox (and IE, but I don't care too much about that).
I suspect some Syntax problem with the svg. The animation works just fine, but the svgs are not displayed correctly. In Firefox it's just a straight line instead of waves.
Anyone out there, that has an idea about that?
Thanks a lot in advance.
.waves {
width: 100%;
height: 7em;
position: relative;
overflow: hidden;
background-color: #f6f9fc;
}
.wave
{
width:calc( 100% + 4em );
height:100%;
position:absolute;
left:-2em;
background:bottom center repeat-x;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
/* Individual wave layers */
.wave_1
{
animation-name:wave_1;
animation-duration:3400ms;
animation-delay:-1200ms;
z-index:2;
opacity: 1;
background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="2000" viewBox="0 0 600 2000"><path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M600 2000c-100.8 0-141.6-39.892-240-39.892S98.4 2000 0 2000V0h6000v2000z"/></svg>');
background-position:bottom left;
background-color: #e0e7f1;
top: -3em;
}
.wave_2
{
z-index:1;
opacity: 1;
background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="2000" viewBox="0 0 600 2000"><path fill-rule="evenodd" clip-rule="evenodd" fill="#e0e7f1" d="M600 2000c-100.8 0-141.6-39.892-240-39.892S98.4 2000 0 2000V0h6000v2000z"/></svg>');
background-position:bottom left;
background-color: #245aa6;
top: 0em;
}
#keyframes wave_1
{
from { transform: rotate(0deg) translatey(-0.61em) rotate(0deg) ; }
to { transform: rotate(360deg) translatey(-0.61em) rotate(-360deg) ; }
}
<div class="waves">
<div class="wave wave_1"></div>
<div class="wave wave_2"></div>
</div>