Сейчас анимация начинается сразу при загрузке страницы:
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>