如何为多路径分组的SVG应用连贯的彩虹线性渐变？

当前你的SVG里，多个<path>虽然被<g>标签分组，但给<g>设置fill="url(#gradient)"后，每个路径还是各自呈现独立彩虹，原因是线性渐变默认使用objectBoundingBox作为渐变单位——每个路径会以自身的边界框为基准映射渐变，自然无法形成连贯的整体效果。

修复步骤： #

1. 给线性渐变添加gradientUnits="userSpaceOnUse"，让渐变基于整个SVG的用户坐标系计算，而非单个元素的边界框
2. 调整渐变的x1、y1、x2、y2参数，匹配整个椅子图形的范围，确保渐变完整覆盖目标区域

修改后的SVG代码： #

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" preserveAspectRatio="xMidYMid meet" viewBox="47.24 11 155.66 150.66">
  <defs>
    <!-- 修改：添加gradientUnits，并设置渐变范围匹配viewBox -->
    <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="47.24" y1="11" x2="202.9" y2="161.66">
      <stop offset="0%" stop-color="rgba(255, 0, 0, 1)"/>
      <stop offset="10%" stop-color="rgba(255, 154, 0, 1)"/>
      <stop offset="20%" stop-color="rgba(208, 222, 33, 1)"/>
      <stop offset="30%" stop-color="rgba(79, 220, 74, 1)"/>
      <stop offset="40%" stop-color="rgba(63, 218, 216, 1)"/>
      <stop offset="50%" stop-color="rgba(47, 201, 226, 1)"/>
      <stop offset="60%" stop-color="rgba(28, 127, 238, 1)"/>
      <stop offset="70%" stop-color="rgba(95, 21, 242, 1)"/>
      <stop offset="80%" stop-color="rgba(186, 12, 248, 1)"/>
      <stop offset="90%" stop-color="rgba(251, 7, 217, 1)"/>
      <stop offset="100%" stop-color="rgba(255, 0, 0, 1)"/>
    </linearGradient>
  </defs>
  <g fill="url(#gradient)" transform="translate(25.000000,130.000000) scale(0.05,-0.05)">
    <path d="M622 2371 c-143 -49 -189 -196 -114 -367 30 -67 31 -73 21 -135 -9 -54 -7 -88 14 -222 14 -87 27 -160 28 -161 2 -2 60 -8 129 -14 94 -7 147 -18 213 -40 118 -41 162 -69 235 -146 l61 -66 126 0 125 0 0 41 c0 23 -12 93 -26 156 -14 63 -24 117 -21 119 2 2 38 0 80 -6 123 -15 233 -68 328 -157 l48 -44 -16 -52 c-21 -74 -24 -76 -85 -64 -37 8 -92 7 -188 -1 -74 -7 -192 -12 -261 -12 l-125 0 -43 -94 c-24 -52 -59 -113 -77 -135 -40 -46 -50 -39 86 -65 132 -26 153 -27 255 -16 104 11 339 61 510 109 94 26 100 29 103 55 6 46 -16 83 -62 106 -23 11 -47 20 -54 20 -21 0 -22 19 -1 67 43 98 43 89 -7 143 -26 28 -67 63 -92 80 -69 45 -221 91 -326 99 l-89 6 -27 86 c-16 48 -44 177 -65 288 -42 236 -54 279 -91 332 -26 37 -125 109 -151 109 -6 0 3 -22 22 -50 51 -75 58 -109 52 -229 -3 -58 -10 -118 -16 -134 l-11 -28 -152 3 -153 3 -6 150 c-6 154 -14 193 -52 233 -43 46 -67 52 -125 33z"/>
    <path d="M744 2360 c54 -48 68 -96 74 -252 l5 -138 142 0 142 0 11 83 c7 45 12 98 12 117 -1 48 -29 120 -67 175 l-33 45 -160 0 -161 0 35 -30z"/>
    <path d="M666 1450 c160 -11 277 -60 406 -171 51 -44 98 -63 98 -40 0 5 -30 36 -66 69 -53 50 -81 66 -152 92 -130 47 -197 60 -302 58 l-95 -1 111 -7z"/>
    <path d="M580 1429 c0 -13 44 -265 56 -321 l5 -26 42 24 c60 35 246 93 337 106 59 8 77 14 73 24 -9 24 -126 106 -199 140 -81 38 -127 50 -236 59 -63 6 -78 5 -78 -6z"/>
    <path d="M1002 1189 c-35 -4 -80 -13 -100 -20 -69 -21 -252 -102 -252 -110 0 -5 1 -9 3 -9 1 0 52 -7 112 -15 61 -8 147 -15 193 -15 l83 0 24 53 c12 29 28 70 33 90 12 42 17 41 -96 26z"/>
    <path d="M1111 1154 c-19 -77 -58 -143 -87 -150 -25 -6 -275 11 -324 23 -14 3 -22 3 -19 -1 14 -15 217 -67 282 -73 84 -7 93 0 152 117 60 119 62 130 32 130 -21 0 -26 -7 -36 -46z"/>
  </g>
</svg>

额外说明： #

• 这里的x1、y1对应SVG viewBox的左上角（47.24, 11），x2、y2对应右下角（47.24+155.66=202.9, 11+150.66=161.66），确保渐变覆盖整个椅子的显示区域
• 如果想要调整彩虹的方向（比如垂直渐变、对角线渐变），只需要修改x1、y1、x2、y2的值即可，比如垂直渐变可以设置x1="125.07" y1="11" x2="125.07" y2="161.66"（125.07是viewBox的水平中点）

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