线性渐变 linearGradient

详细介绍SVG的linearGradient线性渐变，包括渐变方向、坐标设置和多色渐变。通过实例掌握线性渐变的各种应用技巧。 linearGradient创建沿直线方向的颜色过渡效果，是最常用的渐变类型。

基本语法

<defs>
  <linearGradient id="渐变ID" x1="起点X" y1="起点Y" x2="终点X" y2="终点Y">
    <stop offset="位置" stop-color="颜色"/>
  </linearGradient>
</defs>

渐变方向

通过x1、y1、x2、y2四个坐标定义渐变方向。

水平渐变

<defs>
  <linearGradient id="h-grad" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#3498db"/>
    <stop offset="100%" stop-color="#e74c3c"/>
  </linearGradient>
</defs>
<rect x="30" y="20" width="240" height="60" fill="url(#h-grad)"/>

垂直渐变

<defs>
  <linearGradient id="v-grad" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" stop-color="#2ecc71"/>
    <stop offset="100%" stop-color="#27ae60"/>
  </linearGradient>
</defs>
<rect x="30" y="20" width="240" height="60" fill="url(#v-grad)"/>

对角线渐变

<defs>
  <linearGradient id="d-grad" x1="0%" y1="0%" x2="100%" y2="100%">
    <stop offset="0%" stop-color="#9b59b6"/>
    <stop offset="100%" stop-color="#f39c12"/>
  </linearGradient>
</defs>
<rect x="30" y="20" width="240" height="60" fill="url(#d-grad)"/>

多色渐变

通过添加多个stop元素实现多色渐变。

<defs>
  <linearGradient id="multi-grad" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#e74c3c"/>
    <stop offset="25%" stop-color="#f39c12"/>
    <stop offset="50%" stop-color="#2ecc71"/>
    <stop offset="75%" stop-color="#3498db"/>
    <stop offset="100%" stop-color="#9b59b6"/>
  </linearGradient>
</defs>
<rect x="30" y="20" width="240" height="60" fill="url(#multi-grad)"/>

渐变透明度

stop元素支持stop-opacity属性设置透明度。

<defs>
  <linearGradient id="opacity-grad" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#3498db" stop-opacity="1"/>
    <stop offset="100%" stop-color="#3498db" stop-opacity="0"/>
  </linearGradient>
</defs>
<rect x="30" y="20" width="240" height="60" fill="url(#opacity-grad)"/>

gradientUnits属性

定义渐变坐标系统的两种模式。

<defs>
  <linearGradient id="bbox-grad" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="objectBoundingBox">
    <stop offset="0%" stop-color="#e74c3c"/>
    <stop offset="100%" stop-color="#3498db"/>
  </linearGradient>
  <linearGradient id="user-grad" x1="0" y1="0" x2="300" y2="0" gradientUnits="userSpaceOnUse">
    <stop offset="0%" stop-color="#e74c3c"/>
    <stop offset="100%" stop-color="#3498db"/>
  </linearGradient>
</defs>

<rect x="30" y="20" width="100" height="50" fill="url(#bbox-grad)"/>
<rect x="170" y="20" width="100" height="50" fill="url(#user-grad)"/>

实际应用

按钮效果

<defs>
  <linearGradient id="btn-grad" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" stop-color="#3498db"/>
    <stop offset="100%" stop-color="#2980b9"/>
  </linearGradient>
</defs>

<rect x="75" y="25" width="150" height="45" fill="url(#btn-grad)" rx="8"/>
<text x="150" y="55" text-anchor="middle" font-size="14" fill="#fff">点击按钮</text>

进度条

<defs>
  <linearGradient id="progress-grad" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#2ecc71"/>
    <stop offset="50%" stop-color="#27ae60"/>
    <stop offset="100%" stop-color="#2ecc71"/>
  </linearGradient>
</defs>

<rect x="30" y="35" width="240" height="20" fill="#ecf0f1" rx="10"/>
<rect x="30" y="35" width="180" height="20" fill="url(#progress-grad)" rx="10"/>

金属质感

<defs>
  <linearGradient id="metal-grad" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" stop-color="#bdc3c7"/>
    <stop offset="20%" stop-color="#ecf0f1"/>
    <stop offset="40%" stop-color="#bdc3c7"/>
    <stop offset="60%" stop-color="#ecf0f1"/>
    <stop offset="80%" stop-color="#bdc3c7"/>
    <stop offset="100%" stop-color="#95a5a6"/>
  </linearGradient>
</defs>

<rect x="30" y="20" width="240" height="50" fill="url(#metal-grad)" rx="5"/>