0

Как сделать бесконечную 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>

1 ответ 1

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>

5
  • Спасибо вам за помощь! Я был близок )
    – Brendan8c
    19 янв в 8:08
  • Не за что, удачи в изучении SVG) Могу посоветовать вот этот сайт svg-art, участник ruSO @AlexandrTT собрал много информации)
    – De.Minov
    19 янв в 8:12
  • 1
    Спасибо, да уже был на этом сайте сего, зная что @AlexandrTT гуру в SVG зашёл на его страничку, там он и был указан (:
    – Brendan8c
    19 янв в 8:48
  • @De.Minov хорошая идея, хороший ответ 19 янв в 14:32
  • @Alexandr_TT, спасибо)
    – De.Minov
    19 янв в 15:16

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.