Question

我在 SVG 图像中有 linear-gradient (45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%)。怎么让它动？我尝试了 background-position 和 box-shadow，但我发现它很难。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34" height="24.395" viewBox="0 0 400 287">
  <defs>
    <style>
      .cls-1 {
        fill-rule: evenodd;
        fill: url(#linear-gradient);
      animation: x 15s ease infinite;
      }
     
     @keyframes x {
0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
        }
    </style>
    <linearGradient id="linear-gradient" x1="56.5" y1="287" x2="343.5" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#f09433"/>
      <stop offset="0.25" stop-color="#e6683c"/>
      <stop offset="0.5" stop-color="#dc2743"/>
      <stop offset="0.75" stop-color="#cc2366"/>
      <stop offset="1" stop-color="#bc1888"/>
    </linearGradient>
  </defs>
  <path class="cls-1" d="M196,7c9.509,1.576,19.244,4.725,22,13,7,8.987-.365,24.476-7,29l-8,3v8c2.26,3.747.8,8.887,2,14,3.284,13.977,2.432,28.97,6,44,6.458,27.2,11.867,53.589,26,73,2.983,4.1,6.112,7.586,12,10,36.526,0.848,54.767-13.747,75-29l12-13a227.127,227.127,0,0,0,29-27c-4.891-5.648-5.507-9.725-5-16,2.088-9.819,7.9-9.908,10-12,7.749-.662,11.613.284,18,2,3.692,4.6,8,12.05,3,22-3.773,5.558-8.622,7.322-24,7-4.087,13.637-17.663,30.068-25,42-11.854,19.28-20.973,44.271-27,69-0.333,0-11.667-4-12-4-12.069-4.331-19.629-5.775-33-8-37.2-6.188-96.361-10.952-134-2-8.638,2.055-18.722,2.438-28,5-7.537,2.081-15.394,5.292-24,6v-2c-1.7-4.788-2.174-10.6-4-16-2.147-6.351-5.072-13.33-8-20-10.872-24.766-28.112-45.709-40-70-10.048.457-16.658-.6-21-6-3.6-4.065-5.164-12.109-2-18,6.09-6.646,8.6-10.485,26-4,2.556,3.98,7.69,9.39,5,18-0.972,3.109-3.965,5.362-4,7,12.645,20.892,58.718,52.784,83,63,10.311,4.338,29.18,7.461,39,1,29-19.081,37.819-95.909,38-145-18.311-4.1-26.547-34.248-6-41C191.579,8.782,194.443,8.251,196,7ZM86,257c14.254-2.637,29.666-7.6,43-11,5.7-1.415,14.974-1.907,22-3,32.584-8.333,78.627-2.443,113,3,12.606,2,44.6,6.76,48,15l-4,14c-55.444-22.284-162.952-22.755-218,0C88.667,268.667,87.333,263.333,86,257Z"/>
</svg>

如何在 SVG 内设置渐变动画？

0 个答案: