3

Мне интересно, как непрерывно заполнять форму с помощью html5 / css3, чтобы создать анимированную иконку загрузки (счетчик).

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

Заливка должна следовать за красной линией (3) и оставлять форму в том же положении, когда она достигнет конца (6) Если бы это была тонкая линия, я мог бы работать с фальшивой линейной анимацией, но как я могу сделать это с более толстой формой как здесь?

<svg version="1.1" id="Loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 255 255" style="enable-background:new 0 0 255 255; width: 255px; height: 255px" xml:space="preserve">
<g>
    <path d="M169.9,73.6c9,6.2,15.3,14.9,20,23.3c4.7,8.3,7.1,17.2,7.1,26.7c0,4.9-0.7,9.6-2.1,14c-1.4,4.5-3.5,8.7-6.3,12.6
        c-7.1,9.8-16.7,17.7-28.7,23.6c-12.1,5.9-24.7,8.9-37.8,8.9c-7.9,0-15.5-1.6-23-4.8c-7.5-3.2-14.2-7.8-20.1-13.7
        c-5.8-6-10.4-12.6-13.5-20.1c-3.2-7.4-4.8-15-4.8-22.8c0-10.4,3.1-20.1,9.2-29.1c6.1-9,15.5-17.5,28-25.5c0,0,5.8-4.2,10.9-4.2
        c5.1,0,11.1,3.1,6.6,10.3c-4.5,7.2-6.8,14.3-6.8,21.1c0,6.7,2.3,12.4,6.8,16.8c4.5,4.5,10.2,6.7,17,6.7c6.2,0,11.4-2.3,15.6-7
        c4.1-4.7,6.2-10.6,6.2-17.7c0-4.9-1-9.5-3-13.7c-2-4.3-1.3-10.6,4.2-11.5C160.7,66.7,169.9,73.6,169.9,73.6z"/>
</g>
</svg>

Свободный перевод вопроса Animate SVG fill shape by following the form от участника @C.Hillert.

1

1 ответ 1

4

Основная идея - использовать очень толстую линию с изменяющимся stroke-dashoffset. Я обрезаю линию твоим path.

Чтобы лучше понять это, вы можете удалить атрибут clip-path.

Я использую input type range, чтобы изменить значение stroke-dashoffset

itr.addEventListener("input",()=>{pth.setAttribute("stroke-dashoffset",itr.value)})
<p><input type="range" min="0" max="235" value="235" id="itr"/></p>

<svg version="1.1" id="Loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 255 255" style="enable-background:new 0 0 255 255; width: 255px; height: 255px" xml:space="preserve">

  <clipPath id="clip">
    <path d="M169.9,73.6c9,6.2,15.3,14.9,20,23.3c4.7,8.3,7.1,17.2,7.1,26.7c0,4.9-0.7,9.6-2.1,14c-1.4,4.5-3.5,8.7-6.3,12.6
        c-7.1,9.8-16.7,17.7-28.7,23.6c-12.1,5.9-24.7,8.9-37.8,8.9c-7.9,0-15.5-1.6-23-4.8c-7.5-3.2-14.2-7.8-20.1-13.7
        c-5.8-6-10.4-12.6-13.5-20.1c-3.2-7.4-4.8-15-4.8-22.8c0-10.4,3.1-20.1,9.2-29.1c6.1-9,15.5-17.5,28-25.5c0,0,5.8-4.2,10.9-4.2
        c5.1,0,11.1,3.1,6.6,10.3c-4.5,7.2-6.8,14.3-6.8,21.1c0,6.7,2.3,12.4,6.8,16.8c4.5,4.5,10.2,6.7,17,6.7c6.2,0,11.4-2.3,15.6-7
        c4.1-4.7,6.2-10.6,6.2-17.7c0-4.9-1-9.5-3-13.7c-2-4.3-1.3-10.6,4.2-11.5C160.7,66.7,169.9,73.6,169.9,73.6z"/>
</clipPath>
  
  <path id="pth" fill="none" stroke-dasharray="235" stroke-dashoffset="235" stroke="rgb(250,0,0)" stroke-width="72" d="M115,60C15,175 235,175 155,65" clip-path="url(#clip)" />
</svg>

UPDATE

TC комментирует:

Можно ли оставить масштабный ввод и анимировать заполнение, чтобы заполнение происходило автоматически, и при достижении конца заливки происходило стирание , а когда заполнение снова становится пустым, то начинать с начала?

Для этого я буду анимировать stroke-dashoffset красной линии от 235 до -235. Таким образом, после анимации появления закраски всего тире (от 235 до 0) следует анимация удаления закраски (от 0 до -235), и теперь виден разрыв.

@keyframes anim {
  100% {
    stroke-dashoffset: -235;
  }
}

#pth {
  animation: anim 5s linear infinite;
}
<svg version="1.1" id="Loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 255 255" style="enable-background:new 0 0 255 255; width: 255px; height: 255px" xml:space="preserve">

  <clipPath id="clip">
    <path id="base" d="M169.9,73.6c9,6.2,15.3,14.9,20,23.3c4.7,8.3,7.1,17.2,7.1,26.7c0,4.9-0.7,9.6-2.1,14c-1.4,4.5-3.5,8.7-6.3,12.6
        c-7.1,9.8-16.7,17.7-28.7,23.6c-12.1,5.9-24.7,8.9-37.8,8.9c-7.9,0-15.5-1.6-23-4.8c-7.5-3.2-14.2-7.8-20.1-13.7
        c-5.8-6-10.4-12.6-13.5-20.1c-3.2-7.4-4.8-15-4.8-22.8c0-10.4,3.1-20.1,9.2-29.1c6.1-9,15.5-17.5,28-25.5c0,0,5.8-4.2,10.9-4.2
        c5.1,0,11.1,3.1,6.6,10.3c-4.5,7.2-6.8,14.3-6.8,21.1c0,6.7,2.3,12.4,6.8,16.8c4.5,4.5,10.2,6.7,17,6.7c6.2,0,11.4-2.3,15.6-7
        c4.1-4.7,6.2-10.6,6.2-17.7c0-4.9-1-9.5-3-13.7c-2-4.3-1.3-10.6,4.2-11.5C160.7,66.7,169.9,73.6,169.9,73.6z" />
  </clipPath>

  <use href="#base" />

  <path id="pth" fill="none" style="stroke-dasharray:235; stroke-dashoffset:235;" stroke="rgb(250,0,0)" stroke-width="72" d="M115,60C15,175 235,175 155,65" clip-path="url(#clip)" />
</svg>

Свободный перевод ответа от участника @enxaneta.

Ваш ответ

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

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