Javascript 兄弟悬停时的目标动画播放状态

当我将鼠标悬停在某个元素上时，我正在尝试为该元素周围的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

JS

window.onload=function（）{
var circle1=document.getElementById（“circle-1”）；
var link1=document.getElementById（“link-1”）；
对于（变量i=0；i

请在此处查看代码：

我不想使用jQuery。

有几个问题：

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

返回路径元素。那么，

对于（var i=0；i

应该在那里做什么？使用

getElementsByTagName

etc获取列表

路径d属性扩展到svg上，因此要扩展svg，首先清除所有过时的

widt/height

属性。使用

viewBox

属性和

preserveAspectRatio=“none”

。这样可以控制纵横比。宽度和高度使用css

工作小提琴：

无限动画：

#1

这是针对您拥有的单击处理程序：

作为旁注，

getElementsByTagName

是活动的，因此您不必再次调用它

这是mouseout上的取消动画：

---

单击不悬停，对吗？还有为什么getElementById的for循环？@Temaniaff如果

鼠标悬停

而不是

单击

，我会修复它。我不太擅长JS，这就是为什么hahayou对SVG有问题的原因，路径中使用的值很大，超出了viewbox…形状是什么？我添加了原始代码，现在应该可以工作了，好吗我觉得你很接近了。我去掉了for循环并添加了一些JS。问题是动画没有在mouseout上结束。检查：是的，这是因为你没有指定希望它在mouseout上消失。下面是一个：我在mouseout上删除了类。但它仍然不起作用。你发送的小提琴也没有。不是t正确。刚刚在chrome和firefox上测试过。如果单击#1，它将开始绘图。如果从#1中鼠标移出，它将消失。您希望动画暂停或返回到开始的位置是什么？？

#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;
    }
}

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;
         });
    }
};

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

<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>