径向渐变 radialGradient

详细介绍SVG的radialGradient径向渐变，包括渐变中心、半径设置和焦点控制。通过实例掌握径向渐变的各种应用技巧。 radialGradient创建从中心点向外辐射的颜色过渡效果，适合制作球体、光晕等效果。

基本语法

<defs>
  <radialGradient id="渐变ID" cx="中心X" cy="中心Y" r="半径" fx="焦点X" fy="焦点Y">
    <stop offset="位置" stop-color="颜色"/>
  </radialGradient>
</defs>

基本径向渐变

<defs>
  <radialGradient id="basic-radial">
    <stop offset="0%" stop-color="#fff"/>
    <stop offset="100%" stop-color="#3498db"/>
  </radialGradient>
</defs>
<circle cx="150" cy="70" r="50" fill="url(#basic-radial)"/>

渐变中心

cx和cy属性定义渐变中心位置，默认为50%。

<defs>
  <radialGradient id="center1" cx="25%" cy="50%">
    <stop offset="0%" stop-color="#f39c12"/>
    <stop offset="100%" stop-color="#e74c3c"/>
  </radialGradient>
  <radialGradient id="center2" cx="50%" cy="50%">
    <stop offset="0%" stop-color="#f39c12"/>
    <stop offset="100%" stop-color="#e74c3c"/>
  </radialGradient>
  <radialGradient id="center3" cx="75%" cy="50%">
    <stop offset="0%" stop-color="#f39c12"/>
    <stop offset="100%" stop-color="#e74c3c"/>
  </radialGradient>
</defs>

<circle cx="60" cy="70" r="45" fill="url(#center1)"/>
<circle cx="150" cy="70" r="45" fill="url(#center2)"/>
<circle cx="240" cy="70" r="45" fill="url(#center3)"/>

渐变半径

r属性定义渐变半径，控制渐变范围。

<defs>
  <radialGradient id="radius1" r="30%">
    <stop offset="0%" stop-color="#2ecc71"/>
    <stop offset="100%" stop-color="#27ae60"/>
  </radialGradient>
  <radialGradient id="radius2" r="50%">
    <stop offset="0%" stop-color="#2ecc71"/>
    <stop offset="100%" stop-color="#27ae60"/>
  </radialGradient>
  <radialGradient id="radius3" r="80%">
    <stop offset="0%" stop-color="#2ecc71"/>
    <stop offset="100%" stop-color="#27ae60"/>
  </radialGradient>
</defs>

<circle cx="60" cy="70" r="45" fill="url(#radius1)"/>
<circle cx="150" cy="70" r="45" fill="url(#radius2)"/>
<circle cx="240" cy="70" r="45" fill="url(#radius3)"/>

焦点位置

fx和fy属性定义渐变焦点，控制高光位置。

<defs>
  <radialGradient id="focus1" fx="30%" fy="30%">
    <stop offset="0%" stop-color="#fff"/>
    <stop offset="100%" stop-color="#3498db"/>
  </radialGradient>
  <radialGradient id="focus2" fx="50%" fy="50%">
    <stop offset="0%" stop-color="#fff"/>
    <stop offset="100%" stop-color="#3498db"/>
  </radialGradient>
  <radialGradient id="focus3" fx="70%" fy="70%">
    <stop offset="0%" stop-color="#fff"/>
    <stop offset="100%" stop-color="#3498db"/>
  </radialGradient>
</defs>

<circle cx="60" cy="70" r="45" fill="url(#focus1)"/>
<circle cx="150" cy="70" r="45" fill="url(#focus2)"/>
<circle cx="240" cy="70" r="45" fill="url(#focus3)"/>

实际应用

球体效果

<defs>
  <radialGradient id="ball-grad" cx="35%" cy="35%" r="60%">
    <stop offset="0%" stop-color="#fff"/>
    <stop offset="30%" stop-color="#e74c3c"/>
    <stop offset="100%" stop-color="#922b21"/>
  </radialGradient>
</defs>
<circle cx="100" cy="70" r="50" fill="url(#ball-grad)"/>

光晕效果

<defs>
  <radialGradient id="glow-grad">
    <stop offset="0%" stop-color="#f39c12" stop-opacity="1"/>
    <stop offset="50%" stop-color="#f39c12" stop-opacity="0.5"/>
    <stop offset="100%" stop-color="#f39c12" stop-opacity="0"/>
  </radialGradient>
</defs>

<circle cx="150" cy="70" r="60" fill="url(#glow-grad)"/>
<circle cx="150" cy="70" r="20" fill="#f39c12"/>

聚光灯效果

<defs>
  <radialGradient id="spotlight" cx="30%" cy="30%" r="70%">
    <stop offset="0%" stop-color="#fff" stop-opacity="0.8"/>
    <stop offset="100%" stop-color="#000" stop-opacity="0"/>
  </radialGradient>
</defs>

<rect x="30" y="20" width="240" height="100" fill="#34495e"/>
<rect x="30" y="20" width="240" height="100" fill="url(#spotlight)"/>

按钮高光

<defs>
  <radialGradient id="btn-highlight" cx="50%" cy="0%" r="100%">
    <stop offset="0%" stop-color="#fff" stop-opacity="0.4"/>
    <stop offset="100%" stop-color="#fff" stop-opacity="0"/>
  </radialGradient>
</defs>

<rect x="75" y="25" width="150" height="45" fill="#3498db" rx="8"/>
<rect x="75" y="25" width="150" height="45" fill="url(#btn-highlight)" rx="8"/>