Скройте svg при запуске и по-прежнему сохраняйте анимацию с помощью animjs (opacity: 1) снова

Question

Давайте возьмем этот простой svg в качестве примера:

<svg xmlns="http://www.w3.org/2000/svg" 

xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 31.49 31.49" style="enable-background:new 0 0 31.49 31.49;" xml:space="preserve">
<path style="fill:#1E201D;"
      d="M21.205,5.007c-0.429-0.444-1.143-0.444-1.587,0c-0.429,0.429-0.429,1.143,0,1.571l8.047,8.047H1.111  C0.492,14.626,0,15.118,0,15.737c0,0.619,0.492,1.127,1.111,1.127h26.554l-8.047,8.032c-0.429,0.444-0.429,1.159,0,1.587  c0.444,0.444,1.159,0.444,1.587,0l9.952-9.952c0.444-0.429,0.444-1.143,0-1.571L21.205,5.007z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

В начале моего скрипта, когда документ загружен, я нахожу элемент и скрываю его.

const loading_svg = document.getElementById('loading-svg');

 // initialize server-svg as invisible
anime({
    targets: [loading_svg],
    opacity: 0
});

Однако, это решает некоторые проблемы: См. Пример

Цель

Цель теперь состоит в том, чтобы позже он появился, когда пользователь наводит курсор на что-то; поэтому важно, чтобы он был инициализирован как скрытый для начала. Теперь это плохой подход, так как он вначале может скрыть svg после загрузки документа, что означает, что он будет выглядеть примерно так: (обратите внимание, что svg можно увидеть за доли секунды до его исчезновения ) См. Пример

Что я пробовал?

Я попытался установить для атрибута непрозрачности css svg значение 0. Затем, когда пользователь наведен на определенный элемент, попытался сделать:

// initialize server-svg as invisible
anime({
    targets: [loading_svg],
    opacity: 1
});

Однако это не работает.

Я не уверен, как animejs скрывает svg всякий раз, когда вы устанавливаете атрибут opacity в 0, но не похоже, что он устанавливает атрибут непрозрачности css svg в 0. Это также объясняет, почему animejs не может "показать" svg, если его атрибут непрозрачности css равен 0.

Упрощенная скрипка, демонстрирующая проблему:

anime({
        targets: document.getElementsByTagName('svg'),
        opacity: 1
    });

svg {
  opacity: 0
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 31.49 31.49" style="enable-background:new 0 0 31.49 31.49;" xml:space="preserve">
<path style="fill:#1E201D;"

      d="M21.205,5.007c-0.429-0.444-1.143-0.444-1.587,0c-0.429,0.429-0.429,1.143,0,1.571l8.047,8.047H1.111  C0.492,14.626,0,15.118,0,15.737c0,0.619,0.492,1.127,1.111,1.127h26.554l-8.047,8.032c-0.429,0.444-0.429,1.159,0,1.587  c0.444,0.444,1.159,0.444,1.587,0l9.952-9.952c0.444-0.429,0.444-1.143,0-1.571L21.205,5.007z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script>