【问题标题】：SVG stroke-dashoffset animation start (again) on clickSVG stroke-dashoffset 动画在点击时开始（再次）
【发布时间】：2019-03-11 00:22:57
【问题描述】：

我使用 css 和 jquery 制作了一个简单的 svg-stroke-animation。动画从点击开始。但我找不到在第二次点击（或第三次等）时再次启动它的方法。我认为解决方案非常简单，但仍然没有任何效果（例如 .addClass）。它应该是这样工作的：
1. 中风可见
2. 用户点击图片
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 html css animation svg

【解决方案1】：

我只使用 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 来启动一个或另一个动画。

不使用复选框的动画：

在本例中，我使用点击事件将 .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>

【讨论】：

第一：感谢您的快速回答！你能解释一下为什么需要一个复选框吗？我试图向路径添加一个类，但动画不会开始。在您的示例中，它与复选框一起工作得很好，但如果可能的话，我想避免这种情况。另外：每次单击开始相同的动画时，笔划是否可能在开始时已经可见（在您的示例中，笔划每次单击都会改变方向（首先：逆时针，然后：顺时针））
@jessy20 ：我已经更新了我的答案。请看一下
非常感谢 enxaneta！这正是我一直在寻找的：D