如何通过单击按钮在 svg 上暂停 css 动画？

Question

我正在学习本教程：https://www.youtube.com/watch?v=y0Ic8QcvyK8 我决定通过单击按钮暂停动画。我已经试过了，试过了，试过了。通过 w3schools 搜索，在这里搜索，在 google 发给我的任何地方搜索...也许我只是愚蠢，无法独自解决....

这是 html 即时通讯使用

<!DOCTYPE html>
<html lang="en" onscroll="scroller()">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="layout.css">
<script type="text/javascript" src="myscripts.js"> </script>
<script type="text/javascript" src="svg.js"> </script>
</head>
<body>

<button id="b1" class="b3" onclick="change()"></button>
<div class="wrapper">

<svg id="tudo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1350 620" style="enable-background:new 0 0 1350 620;" xml:space="preserve">
   <style type="text/css">

</style>
<g>
  <rect x="14.41" y="12.48" class="st0" width="1414.59" height="596.52"/>
  <path id="p1" class="st1" d="M22.61,207.89l37.94-26.66c10.4,16.7,25.49,24.32,45.85,24.32c22.27,0,37.21-9.08,37.21-21.68
c0-17.29-28.27-30.91-53.03-43.21c-26.51-13.18-55.66-27.69-55.66-65.33c0-40.87,34.57-67.82,77.93-67.82
c32.23,0,58.89,13.33,69.58,41.89l-35.01,24.46c-7.03-14.06-20.65-19.78-33.84-19.78c-17.72,0-30.91,10.25-30.91,22.41
c0,14.06,17.87,18.9,44.97,31.64c39.11,18.46,63.72,38.38,63.72,74.71c0,43.07-35.16,70.46-85.69,70.46
C67,253.3,38.43,237.19,22.61,207.89z"/>
  <path class="st1" d="M220.08,12.48h82.91c45.7,0,83.06,35.89,83.06,79.83c0,43.8-37.35,79.54-83.06,79.54h-35.45v76.76h-47.46
V12.48z M338.58,91.87c0-17.87-15.97-32.37-35.6-32.37h-35.45v65.33l35.45,0.15C322.61,125.13,338.58,110.18,338.58,91.87z"/>
  <path class="st1" d="M402.45,130.84c0-67.82,55.22-123.19,122.75-123.19s122.9,55.37,122.9,123.19
c0,67.24-55.37,122.31-123.05,122.31C457.67,253.15,402.45,198.08,402.45,130.84z M600.06,130.55c0-41.31-33.69-75-75-75
c-41.16,0-74.71,33.69-74.71,75c0,41.02,33.54,74.56,74.71,74.56C566.36,205.11,600.06,171.56,600.06,130.55z"/>
  <path class="st1" d="M816.56,59.5h-58.01v189.11h-47.61V59.5h-58.15V12.48h163.77V59.5z"/>
  <path class="st1" d="M920.86,130.84c0-67.82,55.22-123.19,122.75-123.19s122.9,55.37,122.9,123.19
c0,67.24-55.37,122.31-123.05,122.31C976.08,253.15,920.86,198.08,920.86,130.84z M1118.46,130.55c0-41.31-33.69-75-75-75
c-41.16,0-74.71,33.69-74.71,75c0,41.02,33.54,74.56,74.71,74.56C1084.77,205.11,1118.46,171.56,1118.46,130.55z"/>
  <path class="st1" d="M1244.73,59.21v47.61h81.45v47.31h-81.45v94.78h-47.46V11.89h142.38v47.31H1244.73z"/>
  <path class="st1" d="M197.81,536.98c0,34.86-25.05,71.63-73.68,71.63H34.92V372.48h64.45c41.89,0,68.55,30.76,68.55,62.55
c0,25.05-16.55,40.58-22.27,40.58C168.37,475.6,197.81,499.04,197.81,536.98z M82.23,418.62v46.14h19.19
c11.28,0,22.27-9.67,22.27-23.44c0-13.33-10.4-22.71-21.39-22.71H82.23z M151.52,533.61c0-13.62-9.38-27.25-31.93-27.25H82.23
v55.96h37.5C135.11,562.32,151.52,551.78,151.52,533.61z"/>
  <path class="st1" d="M347.22,608.61l-75.15-111.62v111.62h-47.46l-0.15-236.13h77.05c44.09,0,80.27,33.98,80.27,76.46
c0,30.32-18.31,56.84-43.65,65.77l67.09,93.9H347.22z M271.93,478.83l30.47,0.15c16.11,0.15,30.47-12.89,30.47-29.74
s-14.5-29.74-30.47-29.74h-30.47V478.83z"/>
  <path class="st1" d="M571.2,575.65h-94.48l-15.09,32.96h-51.27l112.79-241.99h1.46l112.94,241.99h-51.42L571.2,575.65z
 M552.74,535.22l-28.71-63.13l-28.86,63.13H552.74z"/>
  <path class="st1" d="M850.98,371.89v241.11h-2.2L708.6,476.63v132.28h-47.46V368.08h2.34l139.89,136.08V371.89H850.98z"/>
  <path class="st1" d="M1083.6,490.84c0,73.24-46.58,117.77-122.9,117.77H892V372.63l68.7-0.15
C1037.02,372.33,1083.6,417.16,1083.6,490.84z M1035.7,490.69c0-44.24-28.42-71.19-75.15-71.19h-21.24v141.8h21.68
C1007.43,561.3,1035.7,534.64,1035.7,490.69z"/>
  <path class="st1" d="M1102.06,567.89l37.94-26.66c10.4,16.7,25.49,24.32,45.85,24.32c22.27,0,37.21-9.08,37.21-21.68
c0-17.29-28.27-30.91-53.03-43.21c-26.51-13.18-55.66-27.69-55.66-65.33c0-40.87,34.57-67.82,77.93-67.82
c32.23,0,58.89,13.33,69.58,41.89l-35.01,24.46c-7.03-14.06-20.65-19.78-33.84-19.78c-17.72,0-30.91,10.25-30.91,22.41
c0,14.06,17.87,18.9,44.97,31.64c39.11,18.46,63.72,38.38,63.72,74.71c0,43.07-35.16,70.46-85.69,70.46
C1146.44,613.3,1117.88,597.19,1102.06,567.89z"/>
</g>
</svg>
</div>
</body>
</html>

我的CSS

    margin: 0 ;
    padding: 0;
    width: 100%;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center ;
    height: 100vh;
    display: table ;
    background-color: black;

}

.wrapper {
    position: absolute; 
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
}

.st0{
    fill:none;
}

.st1{
    fill:none;
    stroke:;
    stroke-width:3;
    stroke-miterlimit:10;
}

path {
    stroke: white ;
    fill: #fff;
    stroke-dasharray: 300;
    opacity: 10;
    animation: animate 3s cubic-bezier(0,0.23,1,.1) infinite;
}

@keyframes animate {

    0% {
        opacity: 0;
        fill: none;
        stroke-dashoffset: 300;
    }

    30% {
        opacity: 10;
        fill: none ;
        stroke-dashoffset: 300;
    }

    90% {
        opacity: 50;
        /*fill: rgba(255,255,255,1);*/
    }

    100% {
        opacity: 10;
        /*fill: rgba(255,255,255,1);*/
    }
}

和我的 JS

function change(){

    var button = document.getElementById('b1'),
        estado = document.getElementsByClassName("st1");

        button.onclick = function() {
            estado.style.animationPlayState = "paused";
        }    

}

非常感谢！

Answer 1

您的 JS 有几处错误。

通过在 HTML 中的按钮上绑定 change() 函数，每次用户单击它时都会执行它，但该函数本身会绑定一个点击事件到你的按钮。由于您已经在 JS 中绑定了事件（顺便说一下，这是最佳实践），因此您需要从 HTML 中删除 change() 函数并直接调用它，因此单击事件只会绑定一次。
getElementsByClassName，顾名思义，return不是一个单一的元素，而是一个元素的集合，这意味着你必须循环遍历访问每个元素的样式属性的集合。

如何通过单击按钮在 svg 上暂停 css 动画？

How do I pause a css animation on a svg with the click of a button?

javascript

css

dom

css-animations

svg-animate