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 渐变的知识,可以参考以下资源: