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已有效，因此您无需再次拨打电话。

这是关于mouseout的取消动画：

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

在兄弟悬停上定位动画播放状态

1 个答案: