SVG 渐变 - 线性

SVG 渐变是一种在 SVG 图形中应用颜色渐变效果的方法。其中,线性渐变是一种常见的渐变类型,它沿着一条直线从一个颜色过渡到另一个颜色。在 SVG 中,线性渐变由 <linearGradient> 元素定义。

定义线性渐变

要定义一个线性渐变,首先需要在 SVG 文件中添加一个 <linearGradient> 元素,并设置 id 属性来标识这个渐变:

--------------- ---------------------
  ----- ----------- ---------------- --
  ----- ------------- ----------------- --
-----------------

在上面的代码中,我们定义了一个线性渐变,从红色过渡到蓝色。<stop> 元素用于指定渐变的颜色和位置。offset 属性表示颜色的位置,可以使用百分比或像素值。

应用线性渐变

要在 SVG 图形中应用线性渐变,可以使用 fillstroke 属性,并指定渐变的 url

----- ------ ------ ----------- ------------ ---------------------------- --

在上面的代码中,我们创建了一个矩形,并使用 fill="url(#linearGradient1)" 来应用之前定义的线性渐变。

线性渐变可以应用在各种 SVG 元素上,如矩形、圆形、路径等,为图形添加丰富的颜色效果。

现在你已经了解了如何在 SVG 中使用线性渐变,接下来让我们深入学习其他类型的渐变效果。


上一篇:SVG 阴影
下一篇:SVG 渐变- 放射性