有没有一种方法可以使用CSS为该SVG设置渐变动画？ [英] Is there a way to animate this SVG with a gradient using CSS?

问题描述

所以我在Google上找到了

解决方案

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

如果需要在较小的内部矩形中显示波浪，则可以添加另一个波浪，或者对剪切的区域尺寸使用剪切。

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

 < div id ='container'style =' width：200px;高度：200像素 
< svg class ='waves'xmlns ='http：//www.w3.org/2000/svg'xmlns：xlink ='http：//www.w3.org/1999/xlink'viewBox =  0 0 200 200 preserveAspectRatio =无 shape-rendering =自动 
< 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。 
<停止偏移量= 0％； stop-color =＃E863BA /> 
< stop offset = 100 stop-color =＃211D2F； /> 
< / linearGradient> 
< / defs> 
< rect x = 0; y ＝ 0。宽度= 200高度= 200 fill = url（＃gradient1）< / rect; 
< g class =视差> 
<使用xlink：href ='＃wave'x = '48'y ='140'fill ='rgba（255，255，255，0.7）'/> 
<使用xlink：href ='＃wave'x = '48'y ='143'fill ='rgba（255，255，255，0.5）'/> 
<使用xlink：href ='＃wave'x = '48'y ='145'fill ='rgba（255，255，255，0.3）'/> 
<使用xlink：href ='＃wave'x = '48'y ='147'fill ='rgba（255，255，255，0.1）'/> 
< / g> 
< / svg> 
< / div> 
  

So I found this image on Google and wanted to try and recreate this graphic and animate it. The part I am talking about is the Purple to Pink gradient waves at the top left of the image.

So far I have done this but can't seem to get everything working as I want. Code below.

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

Things that I can't accomplish are as followed:

1. The SVG needs to fill the whole 200x200 pixel box, not just the top.
2. The waves need to be filled with a Gradient. Since there will be 4 waves moving at different speeds, the gradient probably won't blend between the waves. I'm not sure on how to go about fixing that as the whole thing needs to look like 1 animated wave element. Maybe a static Gradient?
3. The wave SVG need to be resized somehow to look like this.

解决方案

Fill the entire container with a rectangle, having a linear gradient at angle. Then you can add your waves and animate them.

If you need to show waves in the smaller inner rectangle either add another one or use clipping with the clipped area dimensions.

Either way, here's a start:

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

这篇关于有没有一种方法可以使用CSS为该SVG设置渐变动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！