有没有办法使用 CSS 为这个 SVG 设置渐变动画？答案

【问题标题】：Is there a way to animate this SVG with a gradient using CSS?有没有办法使用 CSS 为这个 SVG 设置渐变动画？
【发布时间】：2020-08-12 22:20:10
【问题描述】：

所以我在 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>

我无法完成的事情如下：

SVG 需要填充整个 200x200 像素框，而不仅仅是顶部。
波浪需要用渐变填充。由于会有 4 个波浪以不同的速度移动，因此波浪之间的梯度可能不会混合。我不确定如何解决这个问题，因为整个事情需要看起来像 1 个动画波浪元素。也许是静态渐变？
wave SVG 需要以某种方式调整大小以使其看起来像这样。

【问题讨论】：

看起来渐变是一个简单的背景，而 SVG 是半透明的，所以你可以看到渐变。我不认为它是应用于波浪的渐变
@TemaniAfif 目前没有渐变应用于提供的示例。我在问如何将一个应用于每个波，但让每个波共享渐变，以便它们排列起来看起来像 1 个单个元素。
我说的是你展示的第一张图片
@TemaniAfif 我明白你现在在说什么了。你能举个例子吗？如果您认为这是解决此问题的一种方法，则可以将其作为答案，
@TemaniAfif 另外，第一个 SVG 波完全不透明。

标签： html css svg

【解决方案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>

【讨论】：