Целевое анимационное игровое состояние при наведении родного брата

Question

Я пытаюсь анимировать путь SVG вокруг элемента при наведении курсора на этот элемент.

Я закодировал анимацию с помощью CSS следующим образом:

 #circle-1 {
    fill-opacity: 0;
    fill: transparent;
    stroke: #000;
    stroke-width: 1;
    stroke-dasharray: 163px;
    stroke-dashoffset: 163px;
    animation-name: circle;
    animation-duration: 4000ms;
    animation-iteration-count: 1;
    animation-play-state: paused;
}

@keyframes circle {
    to {
        stroke-dashoffset: 0;
    }
}

Это прекрасно работает. Он перестает работать, когда я пытаюсь запустить анимацию при наведении на элемент родственного элемента, например:

HTML

<h1 id="link-1">#1</h1>
<svg width="57px" height="46px" viewBox="0 0 57 46" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="circle-1">
        <path d="M1252.39102,182.674299 C1222.56333,182.674299 1186.23852,210.300373 1230.21581,223.998154 C1278.92632,239.170208 1268.93364,185.408886 1243.06946,182.674299" id="Path-3"></path>
    </g>
</svg>

CSS

#circle-1 {
    fill-opacity: 0;
    fill: transparent;
    stroke: #000;
    stroke-width: 1;
    stroke-dasharray: 163px;
    stroke-dashoffset: 163px;
    animation-name: circle;
    animation-duration: 4000ms;
    animation-iteration-count: 1;
    animation-play-state: paused;
}

#circle-1.active {
    animation-play-state: running;
}

@keyframes circle {
    to {
        stroke-dashoffset: 0;
    }
}

JS

window.onload = function() {
    var circle1 = document.getElementById("circle-1");
    var link1 = document.getElementById("link-1");
    for (var i = 0; i < circle1.length; i++) {
         link1[i].addEventListener('mouseover', function() {
             circle1.classList.add('active');
             return false;
         });
    }
};

Проверьте код здесь: https://codepen.io/louden/pen/YLeBXB

Я не хочу использовать jQuery.

Answer 1

Несколько выпусков:

var circle1 = document.getElementById("circle-1");

возвращает элемент пути. Так что же for (var i = 0; i < circle1.length; i++) { должен делать там? используйте getElementsByTagName и т. д. для списка ...

Атрибут вашего пути d распространяется на svg, поэтому для расширения svg сначала очистите весь этот устаревший атрибут widht/height. Используйте атрибут viewBox и preserveAspectRatio="none". Таким образом, вы можете контролировать соотношение сторон. Используйте css для ширины и высоты.

Рабочая скрипка:

https://jsfiddle.net/ibowankenobi/40p2fqgc/1/

с бесконечной анимацией: https://jsfiddle.net/ibowankenobi/40p2fqgc/2/

<h1 id="link-1">#1</h1>
<svg viewBox="0 0 2000 2000" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path id="circle-1" d="M1252,182 C1222,182 1186,210 1230,223 C1278,239 1268,185 1243,182"/>
</svg>

И это для обработчика щелчков:

https://jsfiddle.net/ibowankenobi/40p2fqgc/10/

Как примечание: getElementsByTagName живое, поэтому вам не нужно звонить снова.

А вот анимация отмены при наведении мыши:

https://jsfiddle.net/ibowankenobi/40p2fqgc/15/