3

Сейчас анимация начинается сразу при загрузке страницы:

button {
  display: block;
  width: 40px;
  height: 40px;
  border: none;
  outline: none;
  padding: 0px;
}

svg {
  display: block;
  width: 100%;
  height: 100%;
}

.popup {
  position: fixed;
  left: 50%;
  top: 50%;
}
 <button class="startAnimation">анимировать кнопку</button>
 

 <div class="popup">
   <button class="popup__close-order">
     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="220" viewBox="0 0 220 220">
       <circle id="trace" cx="110" cy="110" r="100" stroke="#ecedef" stroke-width="20" fill="none" />
       <circle id="circle" cx="110" cy="110" r="100" transform="rotate(-90,110,110)" stroke-dashoffset="628" stroke-dasharray="628" stroke="#3453f3" stroke-width="20" fill="none">
         <animate attributeName="stroke-dashoffset" dur="5s" values="628;0" repeatCount="1" fill="freeze" />
       </circle>
     </svg>
   </button>

 </div>

1
  • Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете. Commented 17 янв. 2022 в 16:59

1 ответ 1

3

Используйте метод beginElement() для запуска нужной анимации, добавив атрибут begin="indefinite":

document.querySelector('.startAnimation').addEventListener('click', _ => document.getElementById('anim').beginElement());
button {
  display: block;
  width: 40px;
  height: 40px;
  border: none;
  outline: none;
  padding: 0px;
}

svg {
  display: block;
  width: 100%;
  height: 100%;
}

.popup {
  position: fixed;
  left: 50%;
  top: 50%;
}
<button class="startAnimation">анимировать кнопку</button>

<div class="popup">
  <button class="popup__close-order">
     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="220" viewBox="0 0 220 220">
       <circle id="trace" cx="110" cy="110" r="100" stroke="#ecedef" stroke-width="20" fill="none" />
       <circle id="circle" cx="110" cy="110" r="100" transform="rotate(-90,110,110)" stroke-dashoffset="628" stroke-dasharray="628" stroke="#3453f3" stroke-width="20" fill="none">
         <animate attributeName="stroke-dashoffset" dur="5s" values="628;0" repeatCount="1" fill="freeze" begin="indefinite" id="anim" />
       </circle>
     </svg>
   </button>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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