SVG 径向渐变

径向渐变（Radial Gradient）从一个中心点向外扩散创建颜色过渡效果。

基本语法

html

<svg width="200" height="200">
  <defs>
    <radialGradient id="myRadial">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#1e3a8a"/>
    </radialGradient>
  </defs>
  
  <circle fill="url(#myRadial)" cx="100" cy="100" r="80"/>
</svg>

主要属性

radialGradient 属性

属性	描述
`id`	渐变唯一标识
`cx, cy`	渐变圆心坐标（默认 50%）
`r`	渐变半径（默认 50%）
`fx, fy`	焦点坐标（默认与圆心相同）
`fr`	焦点半径
`gradientUnits`	坐标系统
`spreadMethod`	扩展方式

stop 属性

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

基础径向渐变

html

<svg width="400" height="150">
  <defs>
    <radialGradient id="radial1">
      <stop offset="0%" stop-color="#fbbf24"/>
      <stop offset="100%" stop-color="#f59e0b"/>
    </radialGradient>
    
    <radialGradient id="radial2">
      <stop offset="0%" stop-color="#22c55e"/>
      <stop offset="50%" stop-color="#16a34a"/>
      <stop offset="100%" stop-color="#14532d"/>
    </radialGradient>
  </defs>
  
  <circle fill="url(#radial1)" cx="80" cy="75" r="60"/>
  <circle fill="url(#radial2)" cx="230" cy="75" r="60"/>
</svg>

调整渐变位置

改变圆心位置

html

<svg width="500" height="150">
  <defs>
    <!-- 默认中心 -->
    <radialGradient id="center">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="100%" stop-color="#3b82f6"/>
    </radialGradient>
    
    <!-- 左上角 -->
    <radialGradient id="topLeft" cx="20%" cy="20%">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="100%" stop-color="#22c55e"/>
    </radialGradient>
    
    <!-- 右下角 -->
    <radialGradient id="bottomRight" cx="80%" cy="80%">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="100%" stop-color="#ef4444"/>
    </radialGradient>
  </defs>
  
  <circle fill="url(#center)" cx="80" cy="75" r="60"/>
  <text x="80" y="150" text-anchor="middle" font-size="11">中心</text>
  
  <circle fill="url(#topLeft)" cx="220" cy="75" r="60"/>
  <text x="220" y="150" text-anchor="middle" font-size="11">左上</text>
  
  <circle fill="url(#bottomRight)" cx="360" cy="75" r="60"/>
  <text x="360" y="150" text-anchor="middle" font-size="11">右下</text>
</svg>

改变渐变半径

html

<svg width="400" height="150">
  <defs>
    <!-- 小半径 -->
    <radialGradient id="smallR" r="30%">
      <stop offset="0%" stop-color="#fbbf24"/>
      <stop offset="100%" stop-color="#1f2937"/>
    </radialGradient>
    
    <!-- 大半径 -->
    <radialGradient id="largeR" r="100%">
      <stop offset="0%" stop-color="#fbbf24"/>
      <stop offset="100%" stop-color="#1f2937"/>
    </radialGradient>
  </defs>
  
  <circle fill="url(#smallR)" cx="100" cy="75" r="60"/>
  <text x="100" y="150" text-anchor="middle" font-size="11">r="30%"</text>
  
  <circle fill="url(#largeR)" cx="280" cy="75" r="60"/>
  <text x="280" y="150" text-anchor="middle" font-size="11">r="100%"</text>
</svg>

焦点偏移

使用 fx 和 fy 创建偏心效果：

html

<svg width="400" height="150">
  <defs>
    <!-- 无偏移 -->
    <radialGradient id="noOffset">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="100%" stop-color="#3b82f6"/>
    </radialGradient>
    
    <!-- 焦点偏移 -->
    <radialGradient id="withOffset" fx="30%" fy="30%">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="100%" stop-color="#3b82f6"/>
    </radialGradient>
  </defs>
  
  <circle fill="url(#noOffset)" cx="100" cy="75" r="60"/>
  <text x="100" y="150" text-anchor="middle" font-size="11">无偏移</text>
  
  <circle fill="url(#withOffset)" cx="280" cy="75" r="60"/>
  <text x="280" y="150" text-anchor="middle" font-size="11">焦点偏移</text>
</svg>

spreadMethod 扩展方式

html

<svg width="500" height="150">
  <defs>
    <!-- pad -->
    <radialGradient id="padRadial" r="30%" spreadMethod="pad">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#22c55e"/>
    </radialGradient>
    
    <!-- repeat -->
    <radialGradient id="repeatRadial" r="30%" spreadMethod="repeat">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#22c55e"/>
    </radialGradient>
    
    <!-- reflect -->
    <radialGradient id="reflectRadial" r="30%" spreadMethod="reflect">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#22c55e"/>
    </radialGradient>
  </defs>
  
  <circle fill="url(#padRadial)" cx="80" cy="75" r="60"/>
  <text x="80" y="150" text-anchor="middle" font-size="11">pad</text>
  
  <circle fill="url(#repeatRadial)" cx="220" cy="75" r="60"/>
  <text x="220" y="150" text-anchor="middle" font-size="11">repeat</text>
  
  <circle fill="url(#reflectRadial)" cx="360" cy="75" r="60"/>
  <text x="360" y="150" text-anchor="middle" font-size="11">reflect</text>
</svg>

多色径向渐变

html

<svg width="300" height="150">
  <defs>
    <radialGradient id="multiColor">
      <stop offset="0%" stop-color="#ef4444"/>
      <stop offset="25%" stop-color="#f59e0b"/>
      <stop offset="50%" stop-color="#22c55e"/>
      <stop offset="75%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#8b5cf6"/>
    </radialGradient>
  </defs>
  
  <circle fill="url(#multiColor)" cx="150" cy="75" r="70"/>
</svg>

透明径向渐变

html

<svg width="300" height="150">
  <defs>
    <radialGradient id="fadeRadial">
      <stop offset="0%" stop-color="#3b82f6" stop-opacity="1"/>
      <stop offset="100%" stop-color="#3b82f6" stop-opacity="0"/>
    </radialGradient>
  </defs>
  
  <!-- 背景 -->
  <rect x="0" y="0" width="300" height="150" fill="#f3f4f6"/>
  
  <!-- 渐变圆 -->
  <circle fill="url(#fadeRadial)" cx="150" cy="75" r="70"/>
</svg>

用于矩形

html

<svg width="300" height="150">
  <defs>
    <radialGradient id="rectRadial" cx="50%" cy="50%" r="70%">
      <stop offset="0%" stop-color="#fbbf24"/>
      <stop offset="100%" stop-color="#b45309"/>
    </radialGradient>
  </defs>
  
  <rect fill="url(#rectRadial)" x="20" y="20" width="260" height="110" rx="10"/>
</svg>

实际应用示例

3D 球体效果

html

<svg width="200" height="200">
  <defs>
    <radialGradient id="sphere" cx="35%" cy="35%" r="60%">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="20%" stop-color="#60a5fa"/>
      <stop offset="60%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#1e3a8a"/>
    </radialGradient>
  </defs>
  
  <circle fill="url(#sphere)" cx="100" cy="100" r="80"/>
</svg>

聚光灯效果

html

<svg width="300" height="200">
  <defs>
    <radialGradient id="spotlight" cx="50%" cy="40%" r="50%">
      <stop offset="0%" stop-color="#fbbf24" stop-opacity="0.8"/>
      <stop offset="50%" stop-color="#fbbf24" stop-opacity="0.3"/>
      <stop offset="100%" stop-color="#000000" stop-opacity="0"/>
    </radialGradient>
  </defs>
  
  <!-- 深色背景 -->
  <rect x="0" y="0" width="300" height="200" fill="#1f2937"/>
  
  <!-- 聚光灯 -->
  <ellipse fill="url(#spotlight)" cx="150" cy="100" rx="120" ry="80"/>
</svg>

按钮高光

html

<svg width="200" height="60">
  <defs>
    <radialGradient id="btnHighlight" cx="50%" cy="0%" r="100%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.3"/>
      <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
    </radialGradient>
  </defs>
  
  <!-- 按钮底色 -->
  <rect x="10" y="10" width="180" height="44" rx="8" fill="#3b82f6"/>
  
  <!-- 高光层 -->
  <rect x="10" y="10" width="180" height="22" rx="8" fill="url(#btnHighlight)"/>
  
  <text x="100" y="38" text-anchor="middle" fill="white" font-size="16" font-weight="bold">
    Button
  </text>
</svg>

图标背景

html

<svg width="100" height="100">
  <defs>
    <radialGradient id="iconBg" cx="30%" cy="30%">
      <stop offset="0%" stop-color="#60a5fa"/>
      <stop offset="100%" stop-color="#3b82f6"/>
    </radialGradient>
  </defs>
  
  <circle fill="url(#iconBg)" cx="50" cy="50" r="45"/>
  <text x="50" y="60" text-anchor="middle" fill="white" font-size="32">★</text>
</svg>

雷达图背景

html

<svg width="200" height="200">
  <defs>
    <radialGradient id="radarBg">
      <stop offset="0%" stop-color="#22c55e" stop-opacity="0.1"/>
      <stop offset="50%" stop-color="#22c55e" stop-opacity="0.2"/>
      <stop offset="100%" stop-color="#22c55e" stop-opacity="0.3"/>
    </radialGradient>
  </defs>
  
  <!-- 背景 -->
  <circle fill="url(#radarBg)" cx="100" cy="100" r="90"/>
  
  <!-- 同心圆 -->
  <circle cx="100" cy="100" r="90" fill="none" stroke="#22c55e" stroke-width="1" opacity="0.5"/>
  <circle cx="100" cy="100" r="60" fill="none" stroke="#22c55e" stroke-width="1" opacity="0.5"/>
  <circle cx="100" cy="100" r="30" fill="none" stroke="#22c55e" stroke-width="1" opacity="0.5"/>
  
  <!-- 十字线 -->
  <line x1="10" y1="100" x2="190" y2="100" stroke="#22c55e" stroke-width="1" opacity="0.5"/>
  <line x1="100" y1="10" x2="100" y2="190" stroke="#22c55e" stroke-width="1" opacity="0.5"/>
</svg>

气泡效果

html

<svg width="200" height="150">
  <defs>
    <radialGradient id="bubble" cx="30%" cy="30%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.8"/>
      <stop offset="30%" stop-color="#60a5fa" stop-opacity="0.4"/>
      <stop offset="100%" stop-color="#3b82f6" stop-opacity="0.2"/>
    </radialGradient>
  </defs>
  
  <rect x="0" y="0" width="200" height="150" fill="#e0f2fe"/>
  
  <circle fill="url(#bubble)" cx="60" cy="50" r="35" stroke="#3b82f6" stroke-width="1" opacity="0.5"/>
  <circle fill="url(#bubble)" cx="130" cy="90" r="45" stroke="#3b82f6" stroke-width="1" opacity="0.5"/>
  <circle fill="url(#bubble)" cx="170" cy="40" r="20" stroke="#3b82f6" stroke-width="1" opacity="0.5"/>
</svg>

下一步

掌握了渐变技术后，接下来看看 SVG 实例中的综合应用！

SVG 径向渐变 ​

基本语法 ​

主要属性 ​

radialGradient 属性 ​

stop 属性 ​

基础径向渐变 ​

调整渐变位置 ​

改变圆心位置 ​

改变渐变半径 ​

焦点偏移 ​

spreadMethod 扩展方式 ​

多色径向渐变 ​

透明径向渐变 ​

用于矩形 ​

实际应用示例 ​

3D 球体效果 ​

聚光灯效果 ​

按钮高光 ​

图标背景 ​

雷达图背景 ​

气泡效果 ​

下一步 ​

SVG 径向渐变

基本语法

主要属性

radialGradient 属性

stop 属性

基础径向渐变

调整渐变位置

改变圆心位置

改变渐变半径

焦点偏移

spreadMethod 扩展方式

多色径向渐变

透明径向渐变

用于矩形

实际应用示例

3D 球体效果

聚光灯效果

按钮高光

图标背景

雷达图背景

气泡效果

下一步