在此动画标记中，没有使用CSS或JS来进行动画。
很长一段时间以来，每个人都在谈论CSS和JS动画或动画库。我想知道为什么没有人在谈论html
一天。
我希望周围的一些大牌能够推动SVG的动画元素，以促进更多的发展。无论如何，开始好事永远不会太晚。我正在采取这项主动性开始在前端社区散布有关SVG动画元素的意识。
让我们首先了解SVG。
第一件事首先 - w3schools始终是一个很好的开始。
什么是SVG？
SVG代表可扩展的向量图形
SVG用于定义Web的基于向量的图形
SVG定义XML格式的图形
SVG文件中的每个元素和每个属性都可以动画
SVG是W3C推荐
SVG与其他W3C标准（例如DOM和XSL
）集成
为什么要SVG？我会告诉你。
这是一个矢量。
作为向量，它是可扩展的。
较小的文件大小。 （平均比PNG文件小5倍。）
易于使用CSS和JS修改。
很容易动画:)更少的时间。另外，无需任何动画软件或图像处理器。
注意：
如果您是SVG的第一个计时器，请自己获得有关SVG的一些有用信息，以及Sara Soueidan博客中有关SVG坐标系统和转换的亲戚。
好吧，足够的话让我们开始行动。打开您喜欢的代码编辑器，然后启动浏览器。我已经使用了Google的Sublime Text 3和Chrome浏览器作为本教程。
我们将一步一步。
步骤1：准备HTML结构。
如果您熟悉Emmet。只需键入html：5在启用emmet启用编辑器中并执行崇高文本执行键是选项卡键。
- 或 -
从下面复制代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG wave animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Wave SVG Animation -->
<div class="waves"></div>
</body>
</html>
Step 2: Drawing a wave-like shape.
I am not good at drawing but, I can tell you that cubic bezier is something we can consider as a wave. So, we will draw a cubic Bezier curve.
<div class="waves">
<svg width="100%" height="200px" fill="none">
<path
fill="#454599"
d="
M 0 67
C 273,183
822,-40
1920,106
V 359
H 0
V 67
Z">
</path>
</svg>
</div>
结果应该这样：
绘制立方体曲线
在这里，我使用CSS定位了背景，并定位了DIV。您可以从底部的该项目的Codepen链接中获取CSS。
让我首先解释一下这些数字和字母的情况。
欢迎来到矩阵！
您需要知道矩阵中数字的绿色降雨量。 （忽略它）
好吧，有三个属性，它们很好地解释了自己。
另外，在元素内部有元素，并附有两个属性填充和d。您仍然可以理解，我们开始用元素绘制一条路径，并用内部的填充属性填充颜色。但是，嘿！什么是d =“ 1230948713294”？那是您的问题吗？这就是我希望您最了解的，因为这是我们在本教程中扮演的事情。
曲线hannhh
使用SVG绘制的平滑曲线有三种变体。
二次曲线曲线
立方bezier曲线
弧
平滑曲线的三种变体。从左 - > *（i）二次bezier曲线，（ii）立方bezier曲线（iii）弧 *
我们将在本教程中使用Cupic Bezier曲线。因此，让我们了解它的工作原理。
如果您在插图画家或素描（例如软件）或笔工具之类的东西上有任何经验，则可以轻松理解它。但是，如果您对笔工具没有任何经验，那就不用担心了。我将解释Bezier曲线的最佳状态。
bezier曲线有两个要点，我们将其称为起点和终点，每个要点都有他们的手柄，我们将调用控制点。
让我们了解以下图。
Cutic Bezier曲线
在上图中：
m x，y是起点
C DX1，DY1是起点的控制点
c x2，y2是终点
C DX2，DY2是终点的控制点
这意味着，
m 0 67 m x，y
C 273,183 C DX1，DY1
822，-40-> dx2，dy2
1920,106 x2，Y2
重要的是：在此示例中，我们使用C 273在此示例中使用了绝对Bezier曲线。 ...但是，它需要在定义点时进行修改。*
Mozilla开发人员社区有一个绝对曲线和相对曲线的很好的解释指南，请访问Mozilla文档以获取Cubic Bezier曲线
步骤3：开始挥舞波。
在开始动画浪潮之前，让我们快速回顾一下我们将如何做。
我们将使用SVG元素来完成。此外，我们将使用一些元素的属性。首先，当我们希望波浪继续挥舞自己时，我们将使用repotcount =“无限期”。其次，我们将通过添加填充=“＃454599”属性来填充波浪。之后，我们将以attributeName =“ d”为目标d属性，并通过添加dur =“ 12S”属性来定义动画的持续时间。接下来，我们将讨论值=“”属性。
<动画
repotcount =“无限”
fill =“＃454599”
attributeName =“ d”
dur =“ 12s”
值=“”
值=“”属性可以以多种方式编写，具体取决于使用情况的上下文。另一方面，如果解释器找到值列表的规范，则解释器将忽略属性的值，从和构成。推荐文章以获取更多详细信息。
在我们的情况下，我们针对元素的d属性来修改曲线。我们还定义了12s的持续时间，这意味着我们可以在4个阶段中分解3秒钟的迭代。让我们现在开始...
值=“
M0 77
C 473,283
822，-40
1920,116
V 359
H 0
V 67
Z;
*second and third iteration will go here*
M0 77
C 473,283
822,-40
1920,116
V 359
H 0
V 67
Z;
“
您可能想知道为什么我使用两次相同的值？
这是因为我们将在动画周期的第四次迭代结束之前回到我们开始的地方，我们将在第二个迭代和第三个迭代期间以形状进行一些动作。
让我们现在进行第二个和第三个动画迭代。
第二次迭代
M0 77
C 473，-40
1222,283
1920,136
V 359
H 0
V 67
z;
第三次迭代
M0 77
C 973,260
1722，-53
1920,120
V 359
H 0
V 67
z;
基本上，我们正在修改迭代和元素之间的点和手柄的值，将根据用dur =“ ...”属性定义的动画持续时间平滑点的转换。
所以，最终代码应该是这样的：
`
<！doctype html>
SVG Wave动画
<！ - Wave SVG动画 - >
<路径
fill =“＃454599”
d =“
M0 67
C 273,183
822，-40
1920.00,106
V 359
H 0
V 67
Z">
<animate
repeatCount="indefinite"
fill="#454599"
attributeName="d"
dur="15s"
values="
M0 77
C 473,283
822,-40
1920,116
V 359
H 0
V 67
Z;
M0 77
C 473,-40
1222,283
1920,136
V 359
H 0
V 67
Z;
M0 77
C 973,260
1722,-53
1920,120
V 359
H 0
V 67
Z;
M0 77
C 473,283
822,-40
1920,116
V 359
H 0
V 67
Z
">
</animate>
</path>
</svg>
`
哦，等等...因为这是我有史以来的第一篇文章。我为你有个好处。
让我告诉您如何将梯度添加到波浪中。
要添加梯度，我们将在元素之前立即添加元素。另外，我们将提供一些诸如ID和梯度开始和结束的位置之类的属性。
内部元素我们将定义要在梯度中使用的颜色的停止点。有关与SVG梯度合作的更多详细信息，请在Mozilla开发人员网络上阅读本文：SVG中的Grdients。
线性化的ID可以在Element的fill =“”属性中使用。
检查下面的代码。
<路径
fill =“ url（＃grad1）”
d =“
M0 67
C 273,183
822，-40
1920.00,106
V 359
H 0
V 67
Z">
<
...
请参阅Er Robin（@ErRobin）的笔
CodePen Home Pure HTML / SVG wave animation
在CodePen上。