如何在SVG中创建渐变？尝试实现失败，附代码求解决方案

别担心，我来一步步教你把那个纯色路径改成渐变填充！你的现有代码里只是用了固定颜色#009de1填充路径，要实现渐变，得先在SVG的<defs>区域（也就是你的defs-only SVG容器里）定义渐变，再让路径引用它就行。

步骤1：定义渐变 #

首先在你的defs-only SVG内部，添加渐变定义——这里以线性渐变为例：

<linearGradient id="waveGradient" x1="0%" y1="0%" x2="0%" y2="100%">
  <stop offset="0%" stop-color="#009de1" />
  <stop offset="100%" stop-color="#0077b6" />
</linearGradient>

• id是渐变的唯一标识，后面路径要通过它引用渐变
• x1/y1和x2/y2控制渐变方向（这里是从上到下的垂直渐变，你可以调整数值改成水平或斜向）
• <stop>标签定义渐变的颜色节点，offset是颜色在渐变中的位置百分比

步骤2：修改路径的填充属性 #

把你原来路径里的fill="#009de1"改成fill="url(#waveGradient)"，这样路径就会自动使用刚才定义的渐变了。

完整修改后的代码 #

<svg class="defs-only" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- 先在defs区域定义渐变 -->
  <linearGradient id="waveGradient" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" stop-color="#009de1" />
    <stop offset="100%" stop-color="#0077b6" />
  </linearGradient>

  <symbol id="bottomwave">
    <svg viewBox="0 0 50 50" preserveAspectRatio="none" >
      <g>
        <!-- 引用渐变作为填充 -->
        <path fill="url(#waveGradient)" d="M 27 4.125C 21 6.125 14 11 0 11L 0 13.9962L 54 14L 54 0C 40 0 33 2.125 27 4.125Z"></path>
      </g>
    </svg>
  </symbol>
</svg>

额外小技巧：径向渐变 #

如果想要圆形/放射状的渐变，只需要把<linearGradient>换成<radialGradient>就行，比如：

<radialGradient id="radialWaveGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
  <stop offset="0%" stop-color="#009de1" />
  <stop offset="100%" stop-color="#0077b6" />
</radialGradient>

然后把路径的fill属性改成url(#radialWaveGradient)就能看到效果了。

内容的提问来源于stack exchange，提问作者Piet Maessen