我找到了很多關于旋轉漸變的信息。我的問題恰恰相反。

我有一個由一些路徑組成的圖標，我想用垂直漸變填充它。我知道怎么做，而且效果很好。

然而，現在我需要旋轉一個路徑/組，但我仍然希望圖標的整體漸變從上到下保持靜態。所以，我的測試中的半圓旋轉，它從底部的藍色移動到頂部的紅色。

這是一個簡單的例子，但我的想法是旋轉或移動我的藝術作品中的路徑和/或組，同時在整個作品中使用固定的漸變填充，就像我可以輕松地處理非動畫作品一樣。

<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="1">
    <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 {
  transform-origin: center;
  animation: spinner_StKS 0.75s infinite linear;
}

.ring,
.bell {}

@keyframes spinner_StKS {
  100% {
    transform: rotate(360deg);
  }
}

<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0" stop-color="red" />
      <stop offset="1" stop-color="blue" />
    </linearGradient>
    <mask id="m1">
      <g id="bell" fill="white" 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>
      <g stroke="white" stroke-width="4.6" fill="none">
      <circle cx="16" cy="16" r="13.7" class="spinner"
        stroke-dasharray="40 100" pathLength="100" stroke-linecap="round"/>
      <circle cx="16" cy="16" r="13.7" opacity="0.25"/>
      </g>
    </mask>
  </defs>
  <rect width="32" height="32" fill="url(#gradient)" mask="url(#m1)" />
</svg>