Как можно зациклить цвета и сохранить прозрачность края с помощью радиальной анимации SVG?

Question

У меня есть SVG в форме диска, к которому я хотел бы применить набор цветов, которые излучаются из центра наружу в цикле, при этом сохраняя прозрачность края (то есть стоп-непрозрачность), аналогично тому, что присутствует, если объектне имеет примененной анимации.

Ниже приведены основные препятствия для анимационной версии:

1. Прозрачность краев не сохраняется.В некоторых случаях я мог бы решить эту проблему, наложив аналогичную форму, чтобы приспособить прозрачность края к цвету, дополнительному к цвету фона целевого объекта - но в этом случае объект находится поверх градиента.

2. Цикл сбрасывается на настроенное значение values="1%; ...", а не плавно зацикливает / циклически изменяет цвета.Не уверен, как обойти это, или если это вообще возможно с радиальной анимацией.

Заранее спасибо за любые мысли / рекомендации!

<div style="background: linear-gradient(#231f20 0%, #231f20 21%, rgba(31, 28, 29, 0.89) 49%, rgba(20, 18, 18, 0.57) 74%, rgba(1, 1, 1, 0.02) 99%, rgba(0, 0, 0, 0) 100%);">
  <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink" width="300" style="display:inline-block;">
    <defs>
      <radialGradient id="gradient"> 
      <stop offset="0%" stop-color="#d6d2c4"/>
      <stop offset="24%" stop-color="#ffd600"/>
      <stop offset="42%" stop-color="#a6cd57"/>
      <stop offset="61%" stop-color="#f8971f"/>
      <stop offset="100%" stop-color="#f8971f" stop-opacity="0"/>
    </radialGradient>
    </defs>

    <!-- radial gradient animation -->
    <circle cx="5" cy="5" r="4" fill="url('#gradient')" />
  </svg>
  <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink" width="300" style="display:inline-block;">
    <defs>
      <radialGradient id="gradientAnimate"> 
  <stop offset="0%" stop-color="#d6d2c4"/>
  <stop offset="10%" stop-color="#ffd600"/>
  <stop offset="20%" stop-color="#a6cd57"/>
  <stop offset="30%" stop-color="#f8971f"/>
  <stop offset="40%" stop-color="#f8971f"/>
  <stop offset="50%" stop-color="#d6d2c4"/>
  <stop offset="70%" stop-color="#ffd600"/>
  <stop offset="80%" stop-color="#a6cd57"/>
  <stop offset="90%" stop-color="#f8971f"/>
  <stop offset="100%" stop-color="#f8971f" stop-opacity="0"/>
		<animate attributeName="r" dur="5s" repeatCount="indefinite"
           values="50%; 100%; 300%" />
</radialGradient>
    </defs>

    <!-- radial gradient animation -->
    <circle cx="5" cy="5" r="4" fill="url('#gradientAnimate')" />
  </svg>
</div>

Answer 1

Решением вашей проблемы было бы применение маски: круг с радиальным градиентом от белого к черному:

<div style="background: linear-gradient(#231f20 0%, #231f20 21%, rgba(31, 28, 29, 0.89) 49%, rgba(20, 18, 18, 0.57) 74%, rgba(1, 1, 1, 0.02) 99%, rgba(0, 0, 0, 0) 100%);">
  <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink" width="300" style="display:inline-block;">
    <defs>
      <radialGradient id="gradient"> 
      <stop offset="0%" stop-color="#d6d2c4"/>
      <stop offset="24%" stop-color="#ffd600"/>
      <stop offset="42%" stop-color="#a6cd57"/>
      <stop offset="61%" stop-color="#f8971f"/>
      <stop offset="100%" stop-color="#f8971f" stop-opacity="0"/>
    </radialGradient>
    </defs>

    <!-- radial gradient animation -->
    <circle cx="5" cy="5" r="4" fill="url('#gradient')" />
  </svg>
  <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink" width="300" style="display:inline-block;">
    <defs>
  <radialGradient id="rg">
   <stop offset="50%" stop-color="#fff"></stop>
   <stop offset="100%" stop-color="#000"></stop>
  </radialGradient>
  <mask id="maskCirc">
   <circle cx="5" cy="5" r="4" fill="url(#rg)"></circle>
  </mask>
      
      <radialGradient id="gradientAnimate"> 
  <stop offset="0%" stop-color="#d6d2c4"/>
  <stop offset="10%" stop-color="#ffd600"/>
  <stop offset="20%" stop-color="#a6cd57"/>
  <stop offset="30%" stop-color="#f8971f"/>
  <stop offset="40%" stop-color="#f8971f"/>
  <stop offset="50%" stop-color="#d6d2c4"/>
  <stop offset="70%" stop-color="#ffd600"/>
  <stop offset="80%" stop-color="#a6cd57"/>
  <stop offset="90%" stop-color="#f8971f"/>
  <stop offset="100%" stop-color="#f8971f" stop-opacity="0"/>
		<animate attributeName="r" dur="5s" repeatCount="indefinite"
           values="50%; 100%; 300%" />
</radialGradient>
    </defs>

    <!-- radial gradient animation -->
    <circle cx="5" cy="5" r="4" fill="url('#gradientAnimate')" style="mask: url(#maskCirc);"/>
  </svg>
</div>