SVG实现渐变效果
SVG（可缩放矢量图形）提供了强大的渐变功能，能够为图形和文本添加丰富的色彩过渡效果。通过定义渐变，开发者可以创建从一种颜色平滑过渡到另一种颜色的视觉效果。SVG支持两种主要的渐变类型：线性渐变（Linear Gradients）和径向渐变（Radial Gradients）。下面将详细介绍如何实现这两种渐变。
一、基本概念与定义
在SVG中，渐变通常定义在<defs>元素内部。<defs>元素用于存储可重用的图形定义，包括渐变、滤镜、图案等。定义渐变后，可以通过fill或stroke属性引用它。
定义渐变的核心是<linearGradient>和<radialGradient>元素，它们内部包含多个<stop>子元素。每个<stop>元素代表渐变中的一个颜色节点，通过offset属性指定位置（0% 到 100%），通过stop-color属性指定颜色。
二、线性渐变（Linear Gradients）
线性渐变沿直线方向进行颜色过渡。通过<linearGradient>元素实现，其主要属性包括：
x1, y1, x2, y2：定义渐变线的起点和终点坐标。默认值为0和1，表示渐变的范围是从图形左侧到右侧（水平方向）。这些坐标是相对于引用该渐变的图形的边界框（objectBoundingBox）来计算的。gradientUnits：指定坐标系统。取值为objectBoundingBox（默认）或userSpaceOnUse。
以下是一个水平线性渐变的示例，从红色过渡到蓝色：
<svg width="200" height="200" xmlns="https://www.w3.org/2000/svg"> <defs> <linearGradient id="myLinearGradient" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="red" /> <stop offset="50%" stop-color="yellow" /> <stop offset="100%" stop-color="blue" /> </linearGradient> </defs> <rect x="10" y="10" width="180" height="180" fill="url(#myLinearGradient)" stroke="black" stroke-width="2"/> </svg>
如需创建对角线渐变，可以调整x1、y1、x2、y2的值：
<linearGradient id="diagonalGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="green" /> <stop offset="100%" stop-color="purple" /> </linearGradient>
三、径向渐变（Radial Gradients）
径向渐变以圆形或椭圆形方式从中心向外扩散。通过<radialGradient>元素实现，其核心属性包括：
cx, cy：渐变的中心点坐标，默认为50%（相对于图形中心）。r：渐变的半径，默认为50%。fx, fy：焦点坐标，决定了渐变起始点的位置。默认与中心点相同。
以下是一个从中心向外，由白色过渡到黑色的径向渐变示例：
<svg width="200" height="200" xmlns="https://www.w3.org/2000/svg"> <defs> <radialGradient id="myRadialGradient" cx="50%" cy="50%" r="50%"> <stop offset="0%" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialGradient> </defs> <circle cx="100" cy="100" r="90" fill="url(#myRadialGradient)" stroke="gray" stroke-width="2"/> </svg>
通过调整fx和fy属性，可以创建具有偏移焦点的视觉效果：
<radialGradient id="offsetGradient" cx="50%" cy="50%" r="50%" fx="30%" fy="30%"> <stop offset="0%" stop-color="lightblue" /> <stop offset="100%" stop-color="dodgerblue" /> </radialGradient>
四、角度与旋转控制
在<linearGradient>中，除了使用坐标定义方向，还可以使用gradientTransform属性进行旋转、缩放或倾斜。例如，要创建一个倾斜45度的线性渐变：
<linearGradient id="rotatedGradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(45)"> <stop offset="0%" stop-color="orange" /> <stop offset="100%" stop-color="teal" /> </linearGradient>
五、重复与非重复渐变
默认情况下，渐变仅填充图形一次。若希望渐变在水平或垂直方向无限重复，可以使用spreadMethod属性。该属性接受三个值：
pad（默认）：渐变范围外使用渐变开始或结束的颜色。reflect：渐变以镜像方式重复。repeat：渐变从头开始重复。
<linearGradient id="repeatGradient" x1="0%" y1="0%" x2="10%" y2="0%" spreadMethod="repeat"> <stop offset="0%" stop-color="red" /> <stop offset="100%" stop-color="yellow" /> </linearGradient>
六、完整示例
以下是一个综合应用线性渐变和径向渐变的完整SVG示例：
<svg width="400" height="300" xmlns="https://www.w3.org/2000/svg"> <defs> <!-- 线性渐变 --> <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="#87CEEB" /> <stop offset="100%" stop-color="#B0E0E6" /> </linearGradient> <!-- 径向渐变 --> <radialGradient id="sunGradient" cx="50%" cy="50%" r="50%" fx="30%" fy="30%"> <stop offset="0%" stop-color="#FFD700" /> <stop offset="60%" stop-color="#FFA500" /> <stop offset="100%" stop-color="#FF4500" /> </radialGradient> <!-- 重复渐变 --> <linearGradient id="stripeGradient" x1="0%" y1="0%" x2="10%" y2="0%" spreadMethod="repeat"> <stop offset="0%" stop-color="#ffffff" /> <stop offset="100%" stop-color="#000000" /> </linearGradient> </defs> <!-- 天空背景，使用线性渐变 --> <rect x="0" y="0" width="400" height="200" fill="url(#skyGradient)" /> <!-- 太阳，使用径向渐变 --> <circle cx="300" cy="80" r="40" fill="url(#sunGradient)" /> <!-- 地面，使用重复渐变形成条纹效果 --> <rect x="0" y="200" width="400" height="100" fill="url(#stripeGradient)" /> </svg>
七、注意事项
渐变可以被多个图形元素引用，提高代码复用性。
使用
url(#渐变ID)语法将渐变应用到fill或stroke属性。当
gradientUnits为objectBoundingBox（默认）时，渐变坐标值（0到1或0%到100%）是相对于引用该渐变的图形的边界框。若期望坐标系独立于图形，应设置为userSpaceOnUse。所有包含在<defs>中的元素都需要一个唯一的
id属性以便引用。
通过上述方法，可以灵活地在SVG中创建各种风格的渐变效果，从而提升图形和界面的视觉表现力。掌握这些基础后，可以尝试结合动画或滤镜进行更复杂的创作。