如何旋转SVG中的分组/路径且不使渐变随其旋转？

要实现旋转SVG元素时，渐变保持固定的从上到下静态效果，关键是改变渐变的坐标系绑定方式：

• 默认情况下，SVG线性渐变的gradientUnits属性值为objectBoundingBox，渐变会绑定到元素的边界框，元素旋转时渐变也会跟着旋转。
• 我们需要将其改为userSpaceOnUse，让渐变基于SVG的全局用户坐标系（即viewBox定义的空间），这样无论元素如何旋转或移动，渐变都会固定在整个视口范围内。

具体修改步骤：

1. 给<linearGradient>添加gradientUnits="userSpaceOnUse"属性
2. 调整渐变的终点坐标y2为SVG视口的高度（你的SVG viewBox是0 0 32 32，所以设置y2="32"），确保渐变覆盖整个视口的垂直范围

修改后的完整代码：

<svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
  <style>
    .spinner {
      transform-origin: center;
      animation: spinner_StKS 0.75s infinite linear;
    }

    .ring,
    .bell {}

    @keyframes spinner_StKS {
      100% {
        transform: rotate(360deg);
      }
    }
  </style>

  <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="32" gradientUnits="userSpaceOnUse">
    <stop offset="0" stop-color="red" />
    <stop offset="1" stop-color="blue" />
  </linearGradient>

  <g class="icon" fill="url(#gradient)">
    <g id="bell" transform="translate(8.000000, 7.050223)" class="bell">
      <path d="M15.8842999,14.4638359 C14.9360423,12.930403 14.4236902,11.1769083 14.4002435,9.38474047 L14.4002435,6.2627564 C14.4002435,2.80393155 11.5347569,1.77635684e-15 8,1.77635684e-15 C4.46524313,1.77635684e-15 1.59975652,2.80393155 1.59975652,6.2627564 L1.59975652,9.3800434 C1.5771244,11.1738044 1.06474385,12.9290182 0.115700067,14.4638359 C-0.0338774353,14.7055293 -0.0387448115,15.0073403 0.102964457,15.2535317 C0.244673725,15.4997232 0.510966493,15.6521939 0.799726089,15.6521939 L15.2002739,15.6521939 C15.4890335,15.6521939 15.7553263,15.4997232 15.8970355,15.2535317 C16.0387448,15.0073403 16.0338774,14.7055293 15.8842999,14.4638359 Z" id="Path"></path>
      <path d="M8.80563065,17.8637298 C9.48463281,17.6269821 10.018941,17.1041517 10.260886,16.4397355 L5.73911399,16.4397355 C5.95277088,17.026486 6.39588476,17.5061499 6.97097137,17.7732021 C7.54605798,18.0402543 8.20600694,18.0728182 8.80563065,17.8637298 Z" id="Path"></path>
    </g>

    <path d="M16,4.42658222 C21.6727273,4.42658222 26.6181818,8.49003326 27.4909091,14.1498401 C27.6363636,15.1657028 28.5090909,16.0364423 29.6727273,16.0364423 L29.6727273,16.0364423 C30.8363636,16.0364423 31.8545455,15.0205796 31.8545455,13.8595936 C31.8545455,13.7144703 31.8545455,13.5693471 31.8545455,13.4242238 C30.4,4.71682872 22.2545455,-1.23322459 13.5272727,0.218007922 C6.69090909,1.37899393 1.30909091,6.60343099 0.290909091,13.4242238 C6.66133815e-16,14.7303331 0.872727273,15.7461958 2.03636364,16.0364423 C2.18181818,16.0364423 2.32727273,16.0364423 2.47272727,16.0364423 L2.47272727,16.0364423 C3.49090909,16.0364423 4.50909091,15.1657028 4.65454545,14.1498401 C5.38181818,8.49003326 10.3272727,4.42658222 16,4.42658222 Z" id="spinner" class="spinner"></path>
    <path d="M16,0.0728846708 C7.12727273,0.0728846708 0,7.18392399 0,16.0364423 C0,24.8889607 7.12727273,32 16,32 C24.8727273,32 32,24.8889607 32,16.0364423 C32,7.18392399 24.8727273,0.0728846708 16,0.0728846708 Z M16,27.6463025 C9.6,27.6463025 4.36363636,22.4218654 4.36363636,16.0364423 C4.36363636,9.65101927 9.6,4.42658222 16,4.42658222 C22.4,4.42658222 27.6363636,9.65101927 27.6363636,16.0364423 C27.6363636,22.4218654 22.4,27.6463025 16,27.6463025 Z" id="circle" class="ring" opacity="0.25"></path>
  </g>
</svg>

这样修改后，旋转的半圆（.spinner元素）在转到顶部时会显示渐变的红色部分，转到底部时显示蓝色部分，整个图标渐变始终保持从上到下的静态状态，完全符合需求。

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