Animation 如何一次启动所有动画？

我希望能够单击此SVG上的句柄，然后启动所有动画，而不是每次刷新页面时才重新启动

还有一些其他的事情我想知道如何去做，这些都不是那么重要

手柄：我如何使它旋转回-15度，1.5秒，然后保持该位置3秒，然后有一个1,5秒的动画，在那里它旋转回0度，总共5秒的动画

倒酒：如果我要把它做成一个较短的长方形，那么当水龙头打开时，我怎么能让长方形的底部向下延伸，然后当水龙头关闭时，最靠近水龙头的顶部应该向下延伸到啤酒中，并隐藏起来。让它看起来更像是啤酒从水龙头里掉出来

我尝试使用，但我无法让它启动动画

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="233.816px" height="643.371px" viewBox="0 0 233.816 643.371" enable-background="new 0 0 233.816 643.371"
     xml:space="preserve">
    <path id="pour" fill-rule="evenodd" clip-rule="evenodd" fill="#C06028" d="M134.793,600.695c0,2.761-2.239,5-5,5h-5c-2.761,0-5-2.239-5-5
        v-340c0-2.761,2.239-5,5-5h5c2.761,0,5,2.239,5,5V600.695z">
<animate id="#animatePour" dur="0.1s" attributeName="opacity" from="1" to="0" begin="4.9" repeatCount="0" fill="freeze" />
</path>
<g id="beer-glass_1_">
    <g id="beer_1_">
    <linearGradient id="beer-fill" x1="0.5" y1="1" x2="0.5" y2="0">
          <stop offset="100%" stop-opacity="1" stop-color="#C06028">
            <animate id="#animateBeer1"attributeName="offset" values="0;1" repeatCount="1" dur="5s" begin="0"/>
          </stop>
          <stop offset="100%" stop-opacity="0" stop-color="#C06028">
            <animate id="#animateBeer2" attributeName="offset" values="0;1" repeatCount="1" dur="5s" begin="0"/>
          </stop>       
      </linearGradient>
        <path id="beer-fill" fill-rule="evenodd" clip-rule="evenodd" fill="url(#beer-fill)" d="M80.068,383.621
            c-0.731,4.043,0.561,17.75-0.415,24.842c-2.13,15.49-0.908,28.531,0.895,36.818c2.295,10.549,5.457,21.016,6.568,31.691
            c2.496,23.989,4.08,48.079,5.804,72.144c1.403,19.584,2.343,39.203,3.899,58.773c0.143,1.793,3.068,4.441,5.066,4.832
            c10.412,2.041,20.926,4.717,31.436,4.861c19.596,0.268,39.221-0.885,58.813-1.842c4.91-0.24,9.746-1.992,14.617-3.043
            c2.994-0.645,4.346-2.301,4.535-5.545c1.4-24.098,3.053-48.18,4.475-72.277c1.855-31.391,4.037-62.657,11.771-93.394
            c1.838-7.306,3.26-29.661,1.873-44.111c-0.568-5.906-0.922-8.063-0.717-11.75L80.068,383.621z"/>       
        <g id="beer-bubbles">
            <circle opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="108.337" cy="631.698" r="5">
                        <animateTransform attributeName="transform"
                        type="translate"
                        from="0 0"
                        to="0 -250"
                        begin="3s"
                        dur="2s"
                        repeatCount="indefinite">
                            </circle>       
            <circle opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="133.793" cy="630.698" r="4">
                        <animateTransform attributeName="transform"
                        type="translate"
                        from="0 0"
                        to="0 -250"
                        begin="2s"
                        dur="3s"
                        repeatCount="indefinite">
                            </circle>
            <circle opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="181.17" cy="636.198" r="4.5">
                        <animateTransform attributeName="transform"
                        type="translate"
                        from="0 0"
                        to="0 -250"
                        begin="5.5s"
                        dur="1s"
                        repeatCount="indefinite">
                            </circle>
            <circle opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="204.337" cy="622.622" r="5">
                        <animateTransform attributeName="transform"
                        type="translate"
                        from="0 0"
                        to="0 -250"
                        begin="3.5s"
                        dur="1.5s"
                        repeatCount="indefinite">
                            </circle>
            <circle opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="164.003" cy="626.622" r="4">
                        <animateTransform attributeName="transform"
                        type="translate"
                        from="0 0"
                        to="0 -250"
                        begin="2s"
                        dur="3s"
                        repeatCount="indefinite">
                            </circle>
            <circle opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="122.293" cy="620.122" r="2.5">
                        <animateTransform attributeName="transform"
                        type="translate"
                        from="0 0"
                        to="0 -250"
                        begin="5s"
                        dur="1s"
                        repeatCount="indefinite">
                            </circle>
            <circle opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="187.17" cy="624.122" r="1.5">
                        <animateTransform attributeName="transform"
                        type="translate"
                        from="0 0"
                        to="0 -250"
                        begin="4s"
                        dur="1.5s"
                        repeatCount="indefinite">
                            </circle>
            <circle opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="149.837" cy="634.198" r="2.5">
                        <animateTransform attributeName="transform"
                        type="translate"
                        from="0 0"
                        to="0 -250"
                        begin="5s"
                        dur="2s"
                        repeatCount="indefinite">
                            </circle>
            <circle opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="104.837" cy="619.122" r="1.5">
                        <animateTransform attributeName="transform"
                        type="translate"
                        from="0 0"
                        to="0 -250"
                        begin="2s"
                        dur="3s"
                        repeatCount="indefinite">
                            </circle>
        </g>
    </g>
    <path id="glass-light" opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M99.138,412.893
        c-7.283-0.969-7.33-0.976-8.471,6.327c-2.135,13.66,1.293,26.705,3.902,39.969c3.234,16.442,5.487,33.095,7.663,49.723
        c1.531,11.703,2.247,23.514,3.282,35.28c0.293,3.328,1.399,5.123,4.586,3.42c0-10.257,0.45-20.234-0.104-30.155
        c-0.844-15.104-1.839-30.24-3.801-45.228c-1.547-11.831-5.221-23.38-6.855-35.205C98.267,429.25,99.138,421.208,99.138,412.893z"/>
    <path id="glass_1_" opacity="1" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M234.15,406.965
        c-0.014-0.075-2.215-51.691-2.229-51.76c-0.605-2.835-3.385-1.696-5-0.793c-0.01,0.156,2.971,52.208,2.963,52.364
        c-0.613,11.878,0.381,24.086-2.236,34.485c-7.735,30.736-9.917,62.003-11.771,93.394c-1.423,24.097-3.074,48.18-4.476,72.277
        c-0.188,3.244-1.54,4.9-4.534,5.545c-4.871,1.05-9.707,2.803-14.617,3.043c-19.592,0.957-39.218,2.109-58.813,1.841
        c-10.51-0.145-21.024-2.819-31.437-4.86c-1.998-0.391-4.923-3.039-5.066-4.833c-1.557-19.57-2.497-39.188-3.899-58.772
        c-1.724-24.065-3.307-48.154-5.804-72.145c-1.111-10.676-4.273-21.143-6.567-31.69c-2.504-11.511-2.756-25.218-0.936-37.101
        c0.124-0.809,0.32-52.052,0.463-52.843c-2.516-1.228-3.44-0.6-4.063,0.005c-0.246,0.239-1.166,52.796-1.186,52.916
        c-0.515,2.971-1.537,8.079-1.939,10.334c0,4,0,8,0,12c0.937,5.031,1.485,10.173,2.876,15.076
        c6.298,22.195,8.559,44.973,10.181,67.853c1.175,16.572,2.348,33.146,3.4,49.726c1.293,20.367,2.598,40.735,3.618,61.116
        c0.412,8.237,2.684,12.077,10.593,14.702c3.285,1.091,6.725,1.868,10.156,2.33c6.703,0.902,13.448,1.483,20.176,2.197
        c13.333,0,26.666,0,40,0c3.264-0.371,6.563-0.554,9.785-1.15c7.938-1.472,15.993-2.617,23.703-4.901
        c5.107-1.513,7.354-5.948,7.484-11.659c0.27-11.767,0.885-23.535,1.705-35.279c2.328-33.334,4.05-66.737,7.555-99.951
        c2.092-19.845,7.08-39.383,10.768-59.059c0-4.333,0-8.667,0-13C234.539,415.778,234.607,409.392,234.15,406.965z"/>
    <path id="foam" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M227.107,357.142c0.008-0.202,0.029-0.4,0.029-0.604
        c0-8.284-6.715-15-15-15c-1.994,0-3.894,0.397-5.634,1.104c-3.636-3.758-8.724-6.104-14.366-6.104c-2.441,0-4.77,0.459-6.933,1.26
        c-3.116-1.395-6.565-2.177-10.2-2.177c-5.556,0-10.686,1.814-14.836,4.88c-3.33-2.478-7.444-3.963-11.914-3.963
        c-6.477,0-12.217,3.092-15.872,7.865c-3.65-2.085-7.873-3.282-12.377-3.282c-4.183,0-8.122,1.032-11.586,2.848
        c-1.612-0.592-3.346-0.932-5.164-0.932c-5.568,0-10.416,3.041-13.004,7.545c-9.739,1.345-17.246,9.68-17.246,19.789
        c0,11.046,8.954,20,20,20c4.576,0,8.78-1.554,12.15-4.14c4.152,3.071,9.288,4.89,14.85,4.89c2.877,0,5.638-0.492,8.21-1.387
        c1.578,0.564,3.269,0.887,5.04,0.887c4.178,0,7.955-1.711,10.674-4.468c3.667,4.21,9.053,6.884,15.075,6.884
        c6.28,0,11.878-2.9,15.545-7.428c0.152,0.003,0.303,0.012,0.455,0.012c0.599,0,1.191-0.029,1.779-0.07
        c2.53,4.71,7.5,7.914,13.221,7.914c4.706,0,8.902-2.171,11.652-5.563c3.542,3.183,8.211,5.135,13.348,5.135
        c11.045,0,20-8.954,20-20C235.003,366.547,231.898,360.795,227.107,357.142z">
            <animateTransform id="animateFoam"
            attributeName="transform"
            type="translate"
            from="0 250"
            to="0 0"
            begin="0"
            dur="5s">
        </path>
</g>
<g id="tap">
    <path id="tap-handle" class="handle" fill="#2B2C2B" d="M123.077,164.857l-2.97-158.875c0-3.304,6.71-5.982,14.981-5.982
        c8.275,0,14.984,2.678,14.984,5.982l-2.996,160.327h-0.242c1.662,2.89,2.641,6.394,2.641,10.168
        c0,9.914-6.707,17.946-14.983,17.946c-8.273,0-14.982-8.034-14.982-17.946C119.509,172.044,120.853,167.988,123.077,164.857z">
           <animateTransform id="animateHandle"
            attributeName="transform"
            type="rotate"
            from="0 130 160"
            to="-15 130 160"
            begin="0"
            dur="5s">
        </path>     
    <path id="tap_1_" fill="#2B2C2B" d="M174,193.621h-21.575c0-9.914-8.051-17.947-17.979-17.947s-17.979,8.035-17.979,17.947H84.69
        l1.711-28.459c0-0.826-2.685-1.496-5.993-1.496c-3.311,0-5.993,0.67-5.993,1.496l1.711,28.459H47.348l-5.994-5.984v-4.787
        c0-3.963-2.685-7.178-5.993-7.178H17.378c-2.968,0-5.427,2.588-5.902,5.982H5.992c-3.31,0-5.993,2.678-5.992,5.982v47.858
        c0,3.305,2.685,5.981,5.992,5.981h5.483c0.478,3.396,2.937,5.983,5.903,5.983h17.98c3.31,0,5.991-3.215,5.991-7.183V233.7
        l5.993-5.982h38.854l29.595,43.978c1.898,2.707,8.933,1.063,15.711-3.678c6.779-4.738,10.735-10.771,8.838-13.479l-18.758-28.018
        l50.621-2.99c3.309,0,7.791-6.695,7.791-14.957C179.995,200.316,177.312,193.621,174,193.621z"/>
</g>
</svg>

---

您可以在单击事件时开始动画，并使用+添加额外的时间偏移。我在下面也做了一些额外的修正，这样一切看起来都是合理的

让你生活困难的一件事是你的id值包含符号。它们通常会被解释为时间偏移的开始，但它们可以像我下面所做的那样被转义

---

您可以在单击事件时开始动画，并使用+添加额外的时间偏移。我在下面也做了一些额外的修正，这样一切看起来都是合理的

让你生活困难的一件事是你的id值包含符号。它们通常会被解释为时间偏移的开始，但它们可以像我下面所做的那样被转义

我该如何阻止所有气泡，使其在重新点击手柄时不会比泡沫在空气中漂浮得更快？看起来Chrome不喜欢这种逃脱技巧。如果您将id及其所有引用更改为

taphandle

，它会起作用。@PaulLeBeau引发Chrome错误，然后：-）@PaulLeBeau我添加了一个Chrome兼容的版本。供将来参考，我该如何阻止所有的气泡，使它们在重新点击手柄时不会比泡沫在空气中漂浮得更快？看起来Chrome不喜欢逃跑的把戏。如果您将id及其所有引用更改为

taphandle

，它会起作用。@PaulLeBeau引发Chrome错误，然后：-）@PaulLeBeau我添加了一个Chrome兼容的版本。供将来参考，