SVG 线性渐变

线性渐变（Linear Gradient）可以在两点之间创建平滑的颜色过渡效果。

基本语法

html

<svg width="200" height="100">
  <defs>
    <linearGradient id="myGradient">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#8b5cf6"/>
    </linearGradient>
  </defs>
  
  <rect fill="url(#myGradient)" x="10" y="10" width="180" height="80" rx="8"/>
</svg>

主要属性

linearGradient 属性

属性	描述
`id`	渐变唯一标识
`x1, y1`	渐变起点坐标
`x2, y2`	渐变终点坐标
`gradientUnits`	坐标系统
`spreadMethod`	扩展方式

stop 属性

属性	描述
`offset`	颜色位置（0%-100% 或 0-1）
`stop-color`	颜色值
`stop-opacity`	透明度

渐变方向

水平渐变（默认）

html

<svg width="300" height="80">
  <defs>
    <linearGradient id="horizontal" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#22c55e"/>
    </linearGradient>
  </defs>
  
  <rect fill="url(#horizontal)" x="10" y="10" width="280" height="60" rx="8"/>
</svg>

垂直渐变

html

<svg width="300" height="100">
  <defs>
    <linearGradient id="vertical" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#22c55e"/>
    </linearGradient>
  </defs>
  
  <rect fill="url(#vertical)" x="10" y="10" width="280" height="80" rx="8"/>
</svg>

对角渐变

html

<svg width="400" height="100">
  <defs>
    <!-- 左上到右下 -->
    <linearGradient id="diagonal1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#ef4444"/>
    </linearGradient>
    
    <!-- 右上到左下 -->
    <linearGradient id="diagonal2" x1="100%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#8b5cf6"/>
      <stop offset="100%" stop-color="#f59e0b"/>
    </linearGradient>
  </defs>
  
  <rect fill="url(#diagonal1)" x="10" y="10" width="180" height="80" rx="8"/>
  <rect fill="url(#diagonal2)" x="210" y="10" width="180" height="80" rx="8"/>
</svg>

多色渐变

html

<svg width="400" height="80">
  <defs>
    <linearGradient id="rainbow">
      <stop offset="0%" stop-color="#ef4444"/>
      <stop offset="17%" stop-color="#f59e0b"/>
      <stop offset="33%" stop-color="#eab308"/>
      <stop offset="50%" stop-color="#22c55e"/>
      <stop offset="67%" stop-color="#3b82f6"/>
      <stop offset="83%" stop-color="#6366f1"/>
      <stop offset="100%" stop-color="#8b5cf6"/>
    </linearGradient>
  </defs>
  
  <rect fill="url(#rainbow)" x="10" y="10" width="380" height="60" rx="8"/>
</svg>

透明渐变

html

<svg width="300" height="100">
  <defs>
    <linearGradient id="fadeOut">
      <stop offset="0%" stop-color="#3b82f6" stop-opacity="1"/>
      <stop offset="100%" stop-color="#3b82f6" stop-opacity="0"/>
    </linearGradient>
  </defs>
  
  <!-- 背景 -->
  <rect x="10" y="10" width="280" height="80" fill="#f3f4f6"/>
  
  <!-- 渐变遮罩 -->
  <rect fill="url(#fadeOut)" x="10" y="10" width="280" height="80"/>
</svg>

spreadMethod 扩展方式

当渐变区域小于填充区域时的处理方式：

html

<svg width="500" height="100">
  <defs>
    <!-- pad：默认，延伸边缘颜色 -->
    <linearGradient id="padGrad" x1="20%" y1="0%" x2="80%" y2="0%" spreadMethod="pad">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#22c55e"/>
    </linearGradient>
    
    <!-- repeat：重复渐变 -->
    <linearGradient id="repeatGrad" x1="20%" y1="0%" x2="80%" y2="0%" spreadMethod="repeat">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#22c55e"/>
    </linearGradient>
    
    <!-- reflect：镜像重复 -->
    <linearGradient id="reflectGrad" x1="20%" y1="0%" x2="80%" y2="0%" spreadMethod="reflect">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#22c55e"/>
    </linearGradient>
  </defs>
  
  <rect fill="url(#padGrad)" x="10" y="10" width="150" height="80" rx="5"/>
  <text x="85" y="110" text-anchor="middle" font-size="11">pad</text>
  
  <rect fill="url(#repeatGrad)" x="175" y="10" width="150" height="80" rx="5"/>
  <text x="250" y="110" text-anchor="middle" font-size="11">repeat</text>
  
  <rect fill="url(#reflectGrad)" x="340" y="10" width="150" height="80" rx="5"/>
  <text x="415" y="110" text-anchor="middle" font-size="11">reflect</text>
</svg>

gradientUnits 坐标系统

html

<svg width="400" height="120">
  <defs>
    <!-- objectBoundingBox（默认）：相对于对象边界 -->
    <linearGradient id="objectBB" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="objectBoundingBox">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#22c55e"/>
    </linearGradient>
    
    <!-- userSpaceOnUse：使用用户坐标系统 -->
    <linearGradient id="userSpace" x1="210" y1="0" x2="390" y2="0" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#ef4444"/>
      <stop offset="100%" stop-color="#f59e0b"/>
    </linearGradient>
  </defs>
  
  <rect fill="url(#objectBB)" x="10" y="20" width="180" height="80" rx="8"/>
  <text x="100" y="120" text-anchor="middle" font-size="10">objectBoundingBox</text>
  
  <rect fill="url(#userSpace)" x="210" y="20" width="180" height="80" rx="8"/>
  <text x="300" y="120" text-anchor="middle" font-size="10">userSpaceOnUse</text>
</svg>

渐变用于描边

html

<svg width="300" height="100">
  <defs>
    <linearGradient id="strokeGrad">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="50%" stop-color="#8b5cf6"/>
      <stop offset="100%" stop-color="#ef4444"/>
    </linearGradient>
  </defs>
  
  <rect x="20" y="20" width="120" height="60" rx="10" 
        fill="none" stroke="url(#strokeGrad)" stroke-width="4"/>
  
  <circle cx="230" cy="50" r="35" 
          fill="none" stroke="url(#strokeGrad)" stroke-width="4"/>
</svg>

渐变用于文字

html

<svg width="300" height="80">
  <defs>
    <linearGradient id="textGrad">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#8b5cf6"/>
    </linearGradient>
  </defs>
  
  <text x="150" y="55" text-anchor="middle" font-size="48" font-weight="bold" 
        fill="url(#textGrad)">
    GRADIENT
  </text>
</svg>

实际应用示例

按钮渐变

html

<svg width="200" height="60">
  <defs>
    <linearGradient id="btnGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#60a5fa"/>
      <stop offset="100%" stop-color="#3b82f6"/>
    </linearGradient>
  </defs>
  
  <rect fill="url(#btnGrad)" x="10" y="10" width="180" height="44" rx="8"/>
  <text x="100" y="38" text-anchor="middle" fill="white" font-size="16" font-weight="bold">
    Button
  </text>
</svg>

进度条渐变

html

<svg width="300" height="30">
  <defs>
    <linearGradient id="progressGrad">
      <stop offset="0%" stop-color="#22c55e"/>
      <stop offset="50%" stop-color="#eab308"/>
      <stop offset="100%" stop-color="#ef4444"/>
    </linearGradient>
  </defs>
  
  <!-- 背景 -->
  <rect x="10" y="5" width="280" height="20" rx="10" fill="#e5e7eb"/>
  
  <!-- 进度 -->
  <rect x="10" y="5" width="200" height="20" rx="10" fill="url(#progressGrad)"/>
</svg>

天空背景

html

<svg width="300" height="150">
  <defs>
    <linearGradient id="skyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#0ea5e9"/>
      <stop offset="50%" stop-color="#7dd3fc"/>
      <stop offset="100%" stop-color="#f0f9ff"/>
    </linearGradient>
  </defs>
  
  <rect fill="url(#skyGrad)" width="300" height="150"/>
  
  <!-- 太阳 -->
  <circle cx="250" cy="40" r="25" fill="#fbbf24"/>
</svg>

金属效果

html

<svg width="200" height="80">
  <defs>
    <linearGradient id="metalGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#f5f5f5"/>
      <stop offset="30%" stop-color="#d4d4d4"/>
      <stop offset="50%" stop-color="#a3a3a3"/>
      <stop offset="70%" stop-color="#d4d4d4"/>
      <stop offset="100%" stop-color="#f5f5f5"/>
    </linearGradient>
  </defs>
  
  <rect fill="url(#metalGrad)" x="10" y="10" width="180" height="60" rx="5" 
        stroke="#a3a3a3" stroke-width="1"/>
</svg>

玻璃效果

html

<svg width="200" height="100">
  <defs>
    <linearGradient id="glassGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.5"/>
      <stop offset="50%" stop-color="#ffffff" stop-opacity="0.1"/>
      <stop offset="51%" stop-color="#000000" stop-opacity="0.05"/>
      <stop offset="100%" stop-color="#000000" stop-opacity="0.1"/>
    </linearGradient>
  </defs>
  
  <!-- 底色 -->
  <rect x="10" y="10" width="180" height="80" rx="10" fill="#3b82f6"/>
  
  <!-- 玻璃效果 -->
  <rect x="10" y="10" width="180" height="80" rx="10" fill="url(#glassGrad)"/>
</svg>

Logo 渐变

html

<svg width="200" height="60">
  <defs>
    <linearGradient id="logoGrad">
      <stop offset="0%" stop-color="#f43f5e"/>
      <stop offset="50%" stop-color="#8b5cf6"/>
      <stop offset="100%" stop-color="#3b82f6"/>
    </linearGradient>
  </defs>
  
  <text x="100" y="45" text-anchor="middle" font-size="36" font-weight="bold" 
        font-family="Arial" fill="url(#logoGrad)">
    LOGO
  </text>
</svg>

下一步

掌握了线性渐变后，接下来学习 SVG 径向渐变！

SVG 线性渐变 ​

基本语法 ​

主要属性 ​

linearGradient 属性 ​

stop 属性 ​

渐变方向 ​

水平渐变（默认） ​

垂直渐变 ​

对角渐变 ​

多色渐变 ​

透明渐变 ​

spreadMethod 扩展方式 ​

gradientUnits 坐标系统 ​

渐变用于描边 ​

渐变用于文字 ​

实际应用示例 ​

按钮渐变 ​

进度条渐变 ​

天空背景 ​

金属效果 ​

玻璃效果 ​

Logo 渐变 ​

下一步 ​

SVG 线性渐变

基本语法

主要属性

linearGradient 属性

stop 属性

渐变方向

水平渐变（默认）

垂直渐变

对角渐变

多色渐变

透明渐变

spreadMethod 扩展方式

gradientUnits 坐标系统

渐变用于描边

渐变用于文字

实际应用示例

按钮渐变

进度条渐变

天空背景

金属效果

玻璃效果

Logo 渐变

下一步