2

Нужно реализовать циклическое изменение цвета svg элемента в течении к примеру 5 секунд, но цвет должен меняться сверху в низ(это и не получается). Как это сделать через css?

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

Вот такой результат хочу получить, сама стрелка это svg. Не выходит такая анимация цвета заливки

<svg class="main-arrow main-arrow_bottom">
              	<path d="M8.5 34.6804C8.5 34.9565 8.72386 35.1804 9 35.1804C9.27614 35.1804 9.5 34.9565 9.5 34.6804H8.5ZM9 0L9.38168 -0.32299C9.28668 -0.435254 9.14707 -0.5 9 -0.5C8.85293 -0.5 8.71332 -0.435254 8.61832 -0.32299L9 0ZM17.6183 10.9583C17.7967 11.1691 18.1122 11.1954 18.323 11.017C18.5338 10.8386 18.5601 10.5231 18.3817 10.3123L17.6183 10.9583ZM-0.381677 10.3123C-0.56006 10.5231 -0.533784 10.8386 -0.32299 11.017C-0.112195 11.1954 0.203295 11.1691 0.381677 10.9583L-0.381677 10.3123ZM9.5 34.6804V0H8.5V34.6804H9.5ZM8.61832 0.32299L17.6183 10.9583L18.3817 10.3123L9.38168 -0.32299L8.61832 0.32299ZM0.381677 10.9583L9.38168 0.32299L8.61832 -0.32299L-0.381677 10.3123L0.381677 10.9583Z" transform="translate(1 1.04108)"/>
	              </svg>

1

1 ответ 1

3

Добавляем <animate .../> к stop linearGradient'a, в качестве атрибута используем offset, которому меняем значение от 0 до 1:

body {
  background-color: #ccc;
}
<svg viewBox='0 0 150 150'>
  <defs>
    <linearGradient id='linear-gradient' x1='50%' y1='100%' x2='50%' y2='0%'>
      <stop offset="0" stop-color='red'>
      <!--HERE-->
        <animate attributeName='offset' values='0;1;0' dur='6s' fill='freeze' repeatCount='indefinite'/> 
      </stop>
      <stop offset='0' stop-color='white'/>
    </linearGradient>
  </defs>
  <path d='M8.5 34.6804C8.5 34.9565 8.72386 35.1804 9 35.1804C9.27614 35.1804 9.5 34.9565 9.5 34.6804H8.5ZM9 0L9.38168 -0.32299C9.28668 -0.435254 9.14707 -0.5 9 -0.5C8.85293 -0.5 8.71332 -0.435254 8.61832 -0.32299L9 0ZM17.6183 10.9583C17.7967 11.1691 18.1122 11.1954 18.323 11.017C18.5338 10.8386 18.5601 10.5231 18.3817 10.3123L17.6183 10.9583ZM-0.381677 10.3123C-0.56006 10.5231 -0.533784 10.8386 -0.32299 11.017C-0.112195 11.1954 0.203295 11.1691 0.381677 10.9583L-0.381677 10.3123ZM9.5 34.6804V0H8.5V34.6804H9.5ZM8.61832 0.32299L17.6183 10.9583L18.3817 10.3123L9.38168 -0.32299L8.61832 0.32299ZM0.381677 10.9583L9.38168 0.32299L8.61832 -0.32299L-0.381677 10.3123L0.381677 10.9583Z' transform='translate(1 1.04108)' stroke='url(#linear-gradient)'/>
</svg>

2
  • Спасибо большое!! 1 июл 2018 в 9:58
  • @АртурСимонян, всегда пожалуйста=)
    – Arthur
    1 июл 2018 в 9:58

Ваш ответ

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

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