SVG跨浏览器（Firefox）问题

Question

我试图用svgs修改wavepen的东西。 在Chrome，Safari和Edge中运行得很好，但不适用于Firefox（和IE，但我不太在意）。 我怀疑svg有一些Syntax问题。动画工作正常，但svgs无法正确显示。在Firefox中，它只是一条直线而不是波浪。 那里有人，对此有所了解吗？ 非常感谢提前。

.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>