如何在SVG直线上设置渐变偏移？解决渐变显示单一颜色问题

问题原因 #

你设置的线性渐变使用了gradientUnits="userSpaceOnUse"，但渐变的坐标范围（x1="11.111" x2="33.111" y1="44.111" y2="77.111"）和直线的实际位置（起点1518 1131、终点1681.63 1131）完全脱节。渐变仅在全局坐标系的小范围内生效，直线完全处于这个范围外，只能采样到渐变的单一收尾颜色（蓝色）。

解决方案 #

提供两种可行的修复方式：

方法一：对齐渐变与直线的全局坐标

直接将线性渐变的起点和终点设置为直线的起点和终点，让渐变范围完全覆盖直线，确保颜色沿着直线方向过渡：

<defs>
<linearGradient id="Gradientm5cf5" x1="1518" x2="1681.63" y1="1131" y2="1131" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="red"></stop>
<stop offset="50%" stop-color="blue"></stop>
</linearGradient>
</defs>

<path d="M 1518 1131 L 1681.63 1131" fill="none" stroke="url(#Gradientm5cf5)" stroke-miterlimit="10" pointer-events="stroke" stroke-width="6" style="--animation-time:1s;" class="flow">
</path>

方法二：使用对象边界框（灵活复用）

切换为gradientUnits="objectBoundingBox"，基于直线自身的边界框定义渐变方向，无需关心直线的全局位置，适合需要复用渐变的场景：

<defs>
<linearGradient id="Gradientm5cf5" x1="0%" x2="100%" y1="0%" y2="0%" gradientUnits="objectBoundingBox">
<stop offset="0%" stop-color="red"></stop>
<stop offset="50%" stop-color="blue"></stop>
</linearGradient>
</defs>

<path d="M 1518 1131 L 1681.63 1131" fill="none" stroke="url(#Gradientm5cf5)" stroke-miterlimit="10" pointer-events="stroke" stroke-width="6" style="--animation-time:1s;" class="flow">
</path>

如果是斜线，只需调整渐变的x1/x2/y1/y2或添加gradientTransform旋转渐变方向即可。

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