SVG анимацию прелоадера без css

Рейтинг: 0Ответов: 1Опубликовано: 19.01.2023

Как сделать бесконечную SVG анимацию без CSS и JS с данными условиями?
Есть полоса в виде прямоугольника.
Полоску полностью заполняет градиент из цветов (неважно 2 цвета или 12).
Этот градиент из цветов должен прокручиваться с лева на право.
Например: #00FFFF #0080FF ##0000FF — это градиент из цветов.
Когда цвет #00FFFF проезжает от начала и до конца полосы он снова появляется в начале и так по кругу.
Т.е. все света "градиент из них" бесконечно крутятся внутри этой полосы.

введите сюда описание изображения

      <svg width="100%" height="100%">
        <defs>
          <lineargradient id="Gradient" x1="0" x2="0" y0="0" y1="0">
            <animate attributeName="x1" values="0;0;0;1;1" keyTimes="0;.25;.5;.75;1" dur="3s" repeatCount="indefinite" />
            <animate attributeName="x2" values="0;0;0;0;1" keyTimes="0;.25;.5;.75;1" dur="3s" repeatCount="indefinite" />
            <animate attributeName="y1" values="0;0;0;0;0" keyTimes="0;.25;.5;.75;1" dur="3s" repeatCount="indefinite" />
            <animate attributeName="y2" values="0;0;0;0;0" keyTimes="0;.25;.5;.75;1" dur="3s" repeatCount="indefinite" />

            <stop offset="0%" stop-color="#00FFFF" />
            <stop offset="9%" stop-color="#0080FF" />
            <stop offset="17%" stop-color="#0000FF" />
            <stop offset="25%" stop-color="#8000FF" />
            <stop offset="34%" stop-color="#FF00FF" />
            <stop offset="42%" stop-color="#FF0080" />
            <stop offset="50%" stop-color="#FF0000" />
            <stop offset="59%" stop-color="#FF8000" />
            <stop offset="67%" stop-color="#FFFF00" />
            <stop offset="75%" stop-color="#80FF00" />
            <stop offset="85%" stop-color="#00FF00" />
            <stop offset="100%" stop-color="#00FF80" />
          </lineargradient>
        </defs>
        <rect x="0" y="0" width="100%" height="100%" rx="10" fill="url(#Gradient)" />
      </svg>

Ещё вот такой вариант кода удалось сделать, но это тоже не совсем то вышло.

<svg width="800" height="100" viewBox="0 0 800 100">
  
    <lineargradient id="Gradient">
     <stop offset="0%" stop-color="#00FFFF" />
     <stop offset="9%" stop-color="#0080FF" />
     <stop offset="17%" stop-color="#0000FF" />
     <stop offset="25%" stop-color="#8000FF" />
     <stop offset="34%" stop-color="#FF00FF" />
     <stop offset="42%" stop-color="#FF0080" />
     <stop offset="50%" stop-color="#FF0000" />
     <stop offset="59%" stop-color="#FF8000" />
     <stop offset="67%" stop-color="#FFFF00" />
     <stop offset="75%" stop-color="#80FF00" />
     <stop offset="85%" stop-color="#00FF00" />
     <stop offset="100%" stop-color="#00FF80" />
    </lineargradient>

    <g>
       <rect cx="0" cy="0" x="0" y="0" rx="0" ry="0" width="800" height="100" fill="url(#Gradient)"/>
       <animateTransform attributeType="xml" attributeName="transform" type="translate" values="0; 0; 880" dur="2s" repeatCount="indefinite"/>
    </g>
</svg>

svg svg-animation
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Вам нужно продублировать элемент и сдвинуть его в противоположную сторону от движения основного элемента.
В вашем случае это x="-800", т.к. ширина основного 800, а движение выполняется в правую сторону.

Тогда визуально это будет зацикленная анимация:

<svg width="800" height="100" viewBox="0 0 800 100">
  
    <lineargradient id="Gradient">
     <stop offset="0%" stop-color="#00FFFF" />
     <stop offset="9%" stop-color="#0080FF" />
     <stop offset="17%" stop-color="#0000FF" />
     <stop offset="25%" stop-color="#8000FF" />
     <stop offset="34%" stop-color="#FF00FF" />
     <stop offset="42%" stop-color="#FF0080" />
     <stop offset="50%" stop-color="#FF0000" />
     <stop offset="59%" stop-color="#FF8000" />
     <stop offset="67%" stop-color="#FFFF00" />
     <stop offset="75%" stop-color="#80FF00" />
     <stop offset="85%" stop-color="#00FF00" />
     <stop offset="100%" stop-color="#00FF80" />
    </lineargradient>

    <g>
       <rect cx="0" cy="0" x="-800" y="0" rx="0" ry="0" width="800" height="100" fill="url(#Gradient)"/>
       <rect cx="0" cy="0" x="0" y="0" rx="0" ry="0" width="800" height="100" fill="url(#Gradient)"/>
       <animateTransform attributeType="xml" attributeName="transform" type="translate" values="0; 800" dur="2s" repeatCount="indefinite"/>
    </g>
</svg>