渐变停止点 stop

详细介绍SVG渐变的stop停止点元素，包括颜色设置、位置控制和透明度设置。通过实例掌握渐变停止点的各种用法。 stop元素定义渐变中的颜色停止点，控制渐变的颜色变化和过渡效果。

基本语法

<stop offset="位置" stop-color="颜色" stop-opacity="透明度"/>

基本属性

基本使用

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

多停止点

添加多个stop元素创建复杂渐变。

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

硬边缘

当两个停止点位置相同时，产生硬边缘效果。

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

条纹效果

利用硬边缘创建条纹图案。

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

透明度渐变

stop-opacity属性控制停止点的透明度。

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

颜色格式

stop-color支持多种颜色格式。

<defs>
  <linearGradient id="stop-hex" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#e74c3c"/>
    <stop offset="100%" stop-color="#3498db"/>
  </linearGradient>
  <linearGradient id="stop-rgb" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="rgb(231, 76, 60)"/>
    <stop offset="100%" stop-color="rgb(52, 152, 219)"/>
  </linearGradient>
  <linearGradient id="stop-rgba" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="rgba(231, 76, 60, 1)"/>
    <stop offset="100%" stop-color="rgba(52, 152, 219, 0.3)"/>
  </linearGradient>
</defs>

实际应用

彩虹渐变

<defs>
  <linearGradient id="rainbow" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#e74c3c"/>
    <stop offset="16%" stop-color="#f39c12"/>
    <stop offset="33%" stop-color="#f1c40f"/>
    <stop offset="50%" stop-color="#2ecc71"/>
    <stop offset="66%" stop-color="#3498db"/>
    <stop offset="83%" stop-color="#9b59b6"/>
    <stop offset="100%" stop-color="#e91e63"/>
  </linearGradient>
</defs>
<rect x="30" y="20" width="240" height="50" fill="url(#rainbow)"/>

金属光泽

<defs>
  <linearGradient id="metal" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" stop-color="#7f8c8d"/>
    <stop offset="15%" stop-color="#bdc3c7"/>
    <stop offset="30%" stop-color="#7f8c8d"/>
    <stop offset="45%" stop-color="#bdc3c7"/>
    <stop offset="60%" stop-color="#7f8c8d"/>
    <stop offset="75%" stop-color="#bdc3c7"/>
    <stop offset="100%" stop-color="#7f8c8d"/>
  </linearGradient>
</defs>
<rect x="30" y="20" width="240" height="50" fill="url(#metal)"/>