有没有一种方法可以使用CSS为该SVG设置渐变动画？

Question

因此，我在Google上找到了this张图片，并想尝试重新创建该图片并制作动画。我要谈论的部分是图像左上方的紫色到粉红色渐变波。

到目前为止，我已经完成了this，但似乎并不能使所有工作都如我所愿。下面的代码。

<div id='container'>
    <svg class='waves' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 24 150 28' preserveAspectRatio='none' shape-rendering='auto'>
        <defs>
            <path id='wave' d='M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z' />
        </defs>
        <g class='parallax'>
            <use xlink:href='#wave' x='48' y='0' fill='rgba(255, 255, 255, 0.7' />
            <use xlink:href='#wave' x='48' y='3' fill='rgba(255, 255, 255, 0.5)' />
            <use xlink:href='#wave' x='48' y='5' fill='rgba(255, 255, 255, 0.3)' />
            <use xlink:href='#wave' x='48' y='7' fill='#ffffff' />
        </g>
    </svg>
</div>

我无法完成的事情如下：

1. SVG需要填充整个200x200像素的框，而不仅仅是顶部。
2. 波浪需要填充渐变。由于将有4个波以不同的速度运动，因此波之间的梯度可能不会融合。我不确定如何解决这个问题，因为整个事情看起来就像是1个动画wave元素。也许是静态渐变？
3. 需要对wave SVG进行调整，使其看起来像这样。

Answer 1

用矩形填充整个容器，该矩形在角度上具有线性渐变。然后，您可以添加波浪并为其设置动画。

如果您需要在较小的内部矩形中显示波浪，请添加另一个波浪，或使用裁剪区域尺寸的裁剪。

无论哪种方式，这都是一个开始：

<div id='container' style="width: 200px; height: 200px">
    <svg class='waves' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 200 200' preserveAspectRatio='none' shape-rendering='auto'>
        <defs>
            <path id='wave' d='M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z' />
            <linearGradient id="gradient1" x1="1" x2="0" y1="0" y2="1">
                <stop offset="0%" stop-color="#E863BA" />
                <stop offset="100" stop-color="#211D2F" />
            </linearGradient>
        </defs>
        <rect x="0" y="0" width="200" height="200" fill="url(#gradient1)"></rect>
        <g class='parallax'>
            <use xlink:href='#wave' x='48' y='140' fill='rgba(255, 255, 255, 0.7)' />
            <use xlink:href='#wave' x='48' y='143' fill='rgba(255, 255, 255, 0.5)' />
            <use xlink:href='#wave' x='48' y='145' fill='rgba(255, 255, 255, 0.3)' />
            <use xlink:href='#wave' x='48' y='147' fill='rgba(255, 255, 255, 0.1)' />
        </g>
    </svg>
</div>