如何为SVG组件的文本正确添加线性渐变效果？

问题描述 #

尝试为SVG中由path组成的文本添加横向渐变效果，已在<defs>中定义linearGradient并为<g>标签设置fill属性，但效果不符合预期。试过修改渐变写法、切换gradientUnits的objectBoundingBox和userSpaceOnUse属性均未解决问题。

当前效果：
目标效果：

现有代码 #

export const HawllIcon: React.FC<IconSvgProps> = ({
  size = 100,
  width,
  height,
  ...props
}: IconSvgProps) => (
  <svg
    height={size || height}
    preserveAspectRatio="xMidYMid meet"
    version="1.0"
    viewBox="0 0 800 500"
    width={size || width}
    {...props}
    xmlns="http://www.w3.org/2000/svg"
  >
    <defs>
      <linearGradient id="MyGradient" x1="0%" x2="100%" y1="0%" y2="100%">
        <stop offset="5%" stopColor="#ff9459" />
        <stop offset="95%" stopColor="#006fee" />
      </linearGradient>
    </defs>
    <g
      fill="url(#MyGradient)"
      stroke="none"
      transform="translate(0,500) scale(0.1,-0.1)"
    >
      <path
        d="M140 2490 l0 -700 195 0 195 0 0 275 0 275 275 0 275 0 0 -275 0
  -275 195 0 195 0 0 700 0 700 -195 0 -195 0 0 -260 0 -260 -275 0 -275 0 0
260 0 260 -195 0 -195 0 0 -700z"
      />
      <path
        d="M2181 3148 c-10 -24 -141 -320 -291 -658 -150 -338 -281 -634 -291
  -658 l-18 -42 201 2 201 3 203 505 203 505 16 -40 c9 -22 101 -249 204 -505
l187 -465 203 -3 c191 -2 203 -1 197 15 -4 10 -143 325 -309 700 l-302 683
-193 0 -193 0 -18 -42z"
      />
      <path
        d="M3133 3183 c3 -5 73 -219 157 -478 83 -258 155 -473 158 -477 4 -4
54 119 111 273 l104 281 -64 204 -63 204 -204 0 c-112 0 -201 -3 -199 -7z"
      />
      <path
        d="M3883 2490 l-231 -700 176 0 177 0 139 425 c77 234 143 421 146 415
4 -6 31 -89 61 -185 29 -96 57 -171 60 -167 3 4 48 121 98 261 l92 254 -62
198 -62 199 -181 0 -181 -1 -232 -699z"
      />
      <path
        d="M5055 3178 c-3 -7 -70 -215 -150 -463 -80 -247 -180 -553 -221 -680
  -40 -126 -74 -233 -74 -237 0 -4 82 -8 183 -8 l183 0 222 685 c122 376 225
691 228 700 5 13 -16 15 -180 15 -140 0 -188 -3 -191 -12z"
      />
      <path
        d="M5580 2490 l0 -700 530 0 530 0 0 155 0 155 -335 0 -335 0 0 545 0
545 -195 0 -195 0 0 -700z"
      />
      <path
        d="M6800 2490 l0 -700 530 0 530 0 0 155 0 155 -335 0 -335 0 0 545 0
545 -195 0 -195 0 0 -700z"
      />
    </g>
  </svg>
);

解决方案 #

问题根源在于<g>标签的transform="translate(0,500) scale(0.1,-0.1)"变换会扭曲渐变的坐标系统，导致原本的横向渐变被缩放变形。

只需修改<linearGradient>的属性，让渐变基于SVG全局视口而非<g>的局部变换空间：

<defs>
  <linearGradient 
    id="MyGradient" 
    x1="0%" 
    x2="100%" 
    y1="0%" 
    y2="0%"
    gradientUnits="userSpaceOnUse"
  >
    <stop offset="5%" stopColor="#ff9459" />
    <stop offset="95%" stopColor="#006fee" />
  </linearGradient>
</defs>

关键修改点：

• 添加gradientUnits="userSpaceOnUse"：让渐变使用SVG的全局坐标系统，不受子元素变换影响
• 将y1和y2设为相同值（0%）：确保渐变是纯横向的，不会出现斜向渐变

这样修改后，渐变会沿着SVG整个宽度横向延伸，完美匹配目标效果。

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