我用css和jquery做了一个简单的svg-stroke-animation。动画从单击开始。但是我找不到在第二次单击(或第三次等(时再次启动它的方法。我认为解决方案非常简单，但仍然没有任何效果(例如 .addClass(。 这就是它应该工作的方式：
1。行程可见
2。用户点击 image
3。描边动画开始
4。完成后：笔划保持可见
5。用户再次单击
6。描边动画再次开始。
这是我当前的代码：
jQuery(document).ready(function () {
$("#form").click(function () {
var path1 = document.querySelector('#umriss');
var length = path1.getTotalLength();
$(path1).css("stroke-dasharray", length);
});
});body {
width: 100%;
font-size: 20px;
background-color: #eee;
}
.wrapper {
margin: 0 auto;
text-align: center;
max-width: 700px;
}
.bild{
width: 100%;
height: 0;
padding-top: 100%;
position: relative;
}
svg{
position: absolute;
height: 100%;
width: 100%;
left:0;
top:0;
}
#umriss {
stroke-dashoffset: 2600;
animation: ani1 4s linear forwards;
}
@keyframes ani1 {
to {
stroke-dashoffset: 0;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Stroke</title>
</head>
<body>
<div class="wrapper">
<div class="bild">
<svg id="form" x="0px" y="0px" width="812.959px" height="581.971px" viewBox="0 0 812.959 581.971" enable-background="new 0 0 812.959 581.971" xml:space="preserve">
<path id="umriss" fill="#3CC243" stroke="#141412" stroke-width="10" stroke-miterlimit="10" d="M137.521,128.454 C139.812,9.278,220.056,16.972,313.194,20.365c136.466,4.97,179.837,72.616,205.304,200.859
c21.428,107.905,195.473,45.773,260.65,56.229c39.317,6.308-28.293,212.529-53.685,245.178
c-61.222,78.716-262.76,32.434-351.007,35.777c-102.917,3.899-125.172-88.539-81.979-175.921
c71.457-144.56-162.979-48.431-225.951-44.29C-22.9,344.077,25.05,112.387,137.521,128.454z"/>
</svg>
</div>
</div>
</body>
</html>我只使用JQuery来启动动画。其他一切都是用CSS完成的。我在 HTML 中添加了一个控制动画的复选框。该复选框可见，但您可以隐藏它(可见性：隐藏或显示：无(。 我希望这就是你想要实现的目标。
$(label).click(function(){
$(this).addClass("test");
});body {
width: 100%;
font-size: 20px;
background-color: #eee;
}
.wrapper {
margin: 0 auto;
text-align: center;
max-width: 700px;
}
.bild {
width: 100%;
height: 0;
padding-top: 100%;
position: relative;
}
svg {
position: absolute;
left: 0;
top: 0;
}
#umriss {
stroke-dasharray: 2333.43;
stroke-dashoffset: 2333.43;
}
.test #umriss {
animation: ani1 4s linear forwards;}
[type="checkbox"] {
position: absolute;
top: 0;
left: 0;
}
[type="checkbox"]:checked + label #umriss {
animation: ani2 4s linear forwards;
}
@keyframes ani1 {
from {
stroke-dashoffset: 2333.43;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes ani2 {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 2333.43;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="bild">
<input type="checkbox" id="anim"/>
<label for="anim" id="label">
<svg id="form" x="0px" y="0px" width="200" viewBox="0 0 812.959 581.971">
<path id="umriss" fill="#3CC243" stroke="#141412" stroke-width="10" stroke-miterlimit="10" d="M137.521,128.454 C139.812,9.278,220.056,16.972,313.194,20.365c136.466,4.97,179.837,72.616,205.304,200.859
c21.428,107.905,195.473,45.773,260.65,56.229c39.317,6.308-28.293,212.529-53.685,245.178
c-61.222,78.716-262.76,32.434-351.007,35.777c-102.917,3.899-125.172-88.539-81.979-175.921
c71.457-144.56-162.979-48.431-225.951-44.29C-22.9,344.077,25.05,112.387,137.521,128.454z"/>
</svg>
</label>
</div>
</div>更新
在CSS中，我使用选择器:checked来启动一个或另一个动画。
不使用复选框的动画：
在本例中，我使用 click 事件将类.test添加到 bild，并使用事件animationend删除.test类。我希望它有所帮助。
bild.addEventListener("click",()=>{
bild.classList.add("test")
})
//umriss.addEventListener("webkitAnimationEnd",..... );
umriss.addEventListener("animationend",()=>{
console.log("end")
bild.classList.remove("test");
} );body {
width: 100%;
font-size: 20px;
background-color: #eee;
}
.wrapper {
margin: 0 auto;
text-align: center;
max-width: 700px;
}
.bild {
width: 100%;
height: 0;
padding-top: 100%;
position: relative;
}
svg {
position: absolute;
left: 0;
top: 0;
}
#umriss {
stroke-dasharray: 2333.43;
stroke-dashoffset: 0;
}
.test #umriss {
animation: ani1 4s linear forwards;
}
@keyframes ani1 {
from {
stroke-dashoffset: 2333.43;
}
to {
stroke-dashoffset: 0;
}
}<div class="wrapper">
<div id="bild">
<svg id="form" x="0px" y="0px" width="200" viewBox="0 0 812.959 581.971">
<path id="umriss" fill="#3CC243" stroke="#141412" stroke-width="10" stroke-miterlimit="10" d="M137.521,128.454 C139.812,9.278,220.056,16.972,313.194,20.365c136.466,4.97,179.837,72.616,205.304,200.859
c21.428,107.905,195.473,45.773,260.65,56.229c39.317,6.308-28.293,212.529-53.685,245.178
c-61.222,78.716-262.76,32.434-351.007,35.777c-102.917,3.899-125.172-88.539-81.979-175.921
c71.457-144.56-162.979-48.431-225.951-44.29C-22.9,344.077,25.05,112.387,137.521,128.454z"/>
</svg>
</div>
</div>