梯度几乎无处不在网页设计。与纯色相比，渐进的背景，文本，按钮，图表等。梯度颜色看起来更敏捷和自然。
我们今天要讨论的是梯度图。
更多系列文章：SVG基本知识，SVG动画，SVG中的转换转换。
也许您有绘制梯度图形的经验。如果您想绘制梯度矩形，我们可以写下：
使用图形，通过设置（填充颜色）和（边框颜色）属性来实现颜色。
对于梯度颜色的设置，我们不能直接写入中间，而是使用特殊的梯度标签：（线性梯度）和（径向梯度）。
让我们看一下最简单的示例，即如何绘制线性梯度矩形：
通常，我们在元素中定义梯度标签，并将其属性用作其唯一标识，这对于以后需要使用的地方很方便。
该标签定义了梯度颜色的颜色标签，其和属性定义了颜色标准的位置和颜色值。它还具有设置颜色透明度的属性。
如果颜色标签的位置更接近：
矩形左侧的30％面积被填充成纯色，而右侧的30％面积被填充成纯色。实际梯度仅出现在矩形中间的区域的40％。
如果两种颜色都设置为50％，则将两个均匀的矩形分为矩形。在此基础上，我们可以生成各种颜色的条纹图案。
当没有梯度方向时，梯度的默认方向是从左到右。
如果要设置梯度方向，则要使用这些属性。
我们知道，在平面上，方向通常由向量表示。梯度方向由（起点）和（点）的两个点的向量定义表示。
在一般的应用程序方案中，,,,, of的价值。
对于矩形，无论矩形的长度和宽度比如何，左角的左上角是相应的，右下角对应于。
取而代之的是，梯度方向从边框垂直向下向下底部帧。
情况如下：可以看出，、、、、、、、、、、、、、、、、更好的梯度范围的部分则从开始或最终颜色填充了纯色。
在文本的填充中，我们使用了垂直方向的梯度颜色。对于每条文本，它从黄色变为绿色。
如果要设置整个文本行以设置梯度，那么您应该如何设置下面的内容？
这将使用属性。
属性的定义梯度元素（，）参考坐标系统。它有两个值：和。
默认值是定义梯度元素的参考坐标系是引用梯度SVG元素。该元素的左上角是梯度颜色的位置，右下角为。
参考坐标系基于当前的SVG元素窗口区域（视口）。即SVG元素的左上角是梯度颜色的位置，右下角为。
它适用于画布中的多个图形，但是每个图形都是整体梯度一部分的场景。例如百分比。如果获取该值，那确实是不同的。
在上一篇文章中，我们实现了一个可相互作用的环进度栏：在这里，我们将其转换为梯度环进度栏。
使用梯度颜色作为图形边缘的颜色。在中间，使用白色透明度梯度圆来增加三维感。
径向梯度是从中心点到周围环境的颜色的梯度。
与线性梯度的结构相似，我们定义了元素中的径向梯度标签，其属性被用作其唯一标识，以便可以参考以后需要使用的位置。
该标签定义了梯度颜色的颜色标签，其和属性定义了颜色标准的位置和颜色值。
径向梯度的范围由径向梯度的三个属性确定。它们的默认值为50％，这是相对值。相对参考梯度SVG元素。
定义径向梯度范围的圆心，这意味着引用了梯度SVG元件的中心。设置梯度范围的半径。当时，梯度范围的半径是引用梯度的SVG元素和5％的50％。
在没有无声识别的情况下，径向梯度的范围仅被该梯度的SVG元素覆盖。在实际开发中，我们通常需要调整梯度的范围。
默认情况下，梯度点位于梯度范围的中心。如果您想不太对称，则需要更改梯度的位置。
和谐是设置梯度颜色的起始位置。总和为相对值，并且相对也引用了梯度SVG元素。
我们可以设置梯度的范围（，，），也可以设置渐变起点（，）。但是，如果梯度的位置在梯度之外，我们将不需要一些效果。
测试代码如下，可以直接运行：
最后，我们绘制一个具有线性梯度和径向梯度的气泡。
分析：
这里的径向梯度主要是颜色透明度的梯度。设置颜色透明度，我们可以直接指定值，或者我们可以通过设置设置颜色的透明度。
上述渐变颜色匹配来自网站：https：//uigradients.com/