如何为SVG path路径应用渐变颜色，解决不规则图形渐变缺失问题

解决方案 #

你遇到的渐变截断问题核心是渐变的坐标计算范围和目标路径的实际占据范围不匹配，可以通过以下几个方案解决： #

方案1：使用objectBoundingBox坐标系统（最常用） #

SVG渐变默认的gradientUnits属性值就是objectBoundingBox，作用是让渐变的坐标完全基于填充元素的边界框计算：渐变的0%位置对应元素边界框的对应端点，100%位置对应边界框的另一端，天然适配元素大小，不会受元素在整个SVG画布中位置的影响。
你只需要给<linearGradient>标签显式加上这个属性即可，修改后的渐变定义如下：

<linearGradient id="MyGradient" gradientUnits="objectBoundingBox" x1="0" x2="100%" y1="0" y2="100%">
  <stop offset="20%" stop-color="red" />
  <stop offset="20%" stop-color="yellow" />
  <stop offset="40%" stop-color="yellow" />
  <stop offset="40%" stop-color="black" />
  <stop offset="60%" stop-color="black" />
  <stop offset="60%" stop-color="blue" />
  <stop offset="80%" stop-color="blue" />
  <stop offset="100%" stop-color="pink" />
</linearGradient>

修改后所有色阶会完整映射到三角形的边界框范围内，从顶点的红色到底部的粉色都会正常显示。 #

方案2：适配userSpaceOnUse坐标范围 #

如果你需要保留userSpaceOnUse的坐标模式（比如多个元素要共用统一对齐的渐变效果），可以手动调整渐变的坐标参数，让渐变范围刚好覆盖目标路径的边界框。
以你给出的三角形为例，它的边界框范围是x:75_225、y:0200，你可以把渐变的y2调整为200，让渐变的整个色阶刚好落在三角形的高度范围内：

<linearGradient id="MyGradient" gradientUnits="userSpaceOnUse" x1="0" x2="100%" y1="0" y2="200">
  <!-- 不变的stop定义 -->
</linearGradient>

方案3：复杂场景使用裁剪路径 #

如果是极不规则、边界框范围和实际路径偏差较大的图形，可以额外定义裁剪路径，把渐变的渲染范围严格限制在路径内部，再配合调整渐变坐标适配路径大小：

<defs>
  <clipPath id="triClip">
    <path d="M150 0 L75 200 L225 200 Z" />
  </clipPath>
  <!-- 渐变定义 -->
</defs>
<!-- 使用时给渐变的承载元素加上clip-path属性 -->
<path d="M150 0 L75 200 L225 200 Z" clip-path="url(#triClip)" />

修改后完整可运行的示例代码如下：

<svg width="300" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <style type="text/css">
    path {fill:url(#MyGradient)}
  </style>
  <defs>
    <linearGradient id="MyGradient" gradientUnits="objectBoundingBox" x1="0" x2="100%" y1="0" y2="100%">
      <stop offset="20%" stop-color="red" />
      <stop offset="20%" stop-color="yellow" />
      <stop offset="40%" stop-color="yellow" />
      <stop offset="40%" stop-color="black" />
      <stop offset="60%" stop-color="black" />
      <stop offset="60%" stop-color="blue" />
      <stop offset="80%" stop-color="blue" />
      <stop offset="100%" stop-color="pink" />
    </linearGradient>
  </defs>
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

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