SVG 渐变 - 线性
SVG 渐变 - 线性
SVG 渐变允许创建从一种颜色到另一种颜色的光滑过渡。线性渐变是一种最常见的 SVG 渐变类型，它允许您在两个或更多颜色之间创建沿直线的颜色过渡。
创建 SVG 线性渐变
要创建 SVG 线性渐变，您需要定义渐变起始点和终止点，并指定在该渐变中使用的颜色。您可以使用 <linearGradient> 元素在 SVG 中创建线性渐变。
以下是 <linearGradient> 元素的语法：
<linearGradient id="gradient_1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="100%" stop-color="#000000"/>
</linearGradient>
在上面的代码中，我们创建了一个id为“gradient_1”的线性渐变，其起始点为(0%, 0%)，终止点为(100%, 0%)。 x1 和 y1 属性指定渐变的起始点，而 x2 和 y2 属性指定渐变的终止点。
<stop> 元素指定了渐变中所使用的颜色和它们的颜色位置（offset）。在上面的代码中，我们定义了两个 <stop> 元素：
- 第一个
<stop>的颜色位置（offset）为 0%，颜色为白色。 - 第二个
<stop>的颜色位置（offset）为 100%，颜色为黑色。
这将创建一个从左到右的黑白渐变线性渐变。
SVG 渐变 - 线性属性
以下是一些常见的 <linearGradient> 属性：
id：指定线性渐变的 ID。x1：指定渐变的起始点的水平位置，百分比或像素值。y1：指定渐变的起始点的垂直位置，百分比或像素值。x2：指定渐变的终止点的水平位置，百分比或像素值。y2：指定渐变的终止点的垂直位置，百分比或像素值。gradientTransform：可以用来旋转、平移或缩放渐变。spreadMethod：指定了渐变超出其指定范围时所采用的处理方式。有三个可用的值：pad（在渐变范围之外的位置使用与渐变边缘的颜色值相同的颜色）、reflect（扩展渐变，直到达到第一个渐变边界，在此之后，渐变会直接沿着垂直轴向反转），以及repeat(扩展渐变以填充未填充的区域)。
参考资源
如果您想深入学习 SVG 渐变的知识，可以参考以下资源：