I would like to be able to click on the handle on this SVG and then for all the animations to start, instead of only restarting every time the page gets refreshed.
There are a few other things that I would like to know how to do which are not that important.
The handle: How would I make that rotate back -15 deg, for 1.5's then hold that position for 3's then have a 1,5's animation where it rotates back to 0 deg. totaling a 5's animation
- The Pour: If I was to make that a shorter rectangle, how could I get the bottom of the rectangle to stretch down when the tap opens, then when the tap closes the top part closest to the tap should stretch down into the beer becoming hidden. making it look more like the beer is falling out of the tap.
I tried using SVG: Trigger a click event on animateTransform after clicking a button but i could not get it to start the animation.
<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>
You can begin animations onclick events and use + to add additional time offsets. I've made some additional corrections below too so that everything starts off looking reasonable.
One thing making life difficult for you is that your id values contain - signs. They would normally be interpreted as the beginning of time offsets but they can be escaped as I've done below.
Alternatively for browsers that can't handle SMIL escaping properly...