How to get SVG mask to work with animation? - animation

I cannot seem to get this mask to work with my animation in SVG. What is wrong with this code? The green arrow should be masked out from the rightmost side of the circle, so that the arrow appears to be consumed by the circle upon contact.
<svg height="200" width="1200" viewBox="0 0 200 200">
<defs>
<mask id="mask1" x="0" y="0" width="700" height="110" >
<rect x="0" y="0" width="550" height="110" style="stroke:none; fill:white" />
<rect x="550" y="0" width="50" height="110" style="stroke:none; fill:black"/>
</mask>
</defs>
<polygon id="arrow" z-index="1" points="0,5 0,105 105,55" mask="url(#mask1)" fill="green">
<animateTransform attributeName="transform" type="translate" attributeType="XML" values="0, 0; 550, 0; 550, 0" keyTimes="0; .7; 1" dur="3s" repeatCount="indefinite" additive="sum"/>
<animate attributeName="opacity" values="1; 1; 0" keyTimes="0; .5; 1" dur="3s" repeatCount="indefinite" />
</polygon>
<circle z-index="1" cx="550" cy="55" r="49" stroke-width="6" stroke="black" fill="gray"/>
<circle z-index="2" cx="550" cy="55" r="49" stroke-width="6" stroke="black" fill="none"/>
<circle id="greenCircle" z-index="2" cx="550" cy="55" r="49" stroke-width="6" stroke="green" fill="none"/>
<animate id="fillGreen" xlink:href="#greenCircle" attributeName="stroke-dasharray" values="154, 0, 154, 0; 0, 308, 0, 0; 0, 308, 0, 0" keyTimes="0; 0.5; 1" dur="3s" repeatCount="indefinite" />
<circle id="blackCircle" z-index="2" cx="550" cy="55" r="49" stroke-width="6" stroke="green" fill="none"/>
<animate id="fillBlack" xlink:href="#blackCircle" attributeName="stroke-dasharray" values="0, 154, 0, 154; 0, 154, 0, 154; 0, 0, 308, 0" dur="3s" keyTimes="0; 0.5; 1" repeatCount="indefinite" />
</circle>
</svg>


The transform applies to the mask too so as the polygon moves, so does the mask. You need to set the mask on something that doesn't move e.g.
<svg height="200" width="1200" viewBox="0 0 200 200">
<defs>
<mask id="mask1" x="0" y="0" width="700" height="110" >
<rect x="0" y="0" width="550" height="110" style="stroke:none; fill:white" />
<rect x="550" y="0" width="50" height="110" style="stroke:none; fill:black"/>
</mask>
</defs>
<g mask="url(#mask1)" >
<polygon id="arrow" z-index="1" points="0,5 0,105 105,55" fill="green">
<animateTransform attributeName="transform" type="translate" attributeType="XML" values="0, 0; 550, 0; 550, 0" keyTimes="0; .7; 1" dur="3s" repeatCount="indefinite" additive="sum"/>
<animate attributeName="opacity" values="1; 1; 0" keyTimes="0; .5; 1" dur="3s" repeatCount="indefinite" />
</polygon>
</g>
<circle z-index="1" cx="550" cy="55" r="49" stroke-width="6" stroke="black" fill="gray"/>
<circle z-index="2" cx="550" cy="55" r="49" stroke-width="6" stroke="black" fill="none"/>
<circle id="greenCircle" z-index="2" cx="550" cy="55" r="49" stroke-width="6" stroke="green" fill="none"/>
<animate id="fillGreen" xlink:href="#greenCircle" attributeName="stroke-dasharray" values="154, 0, 154, 0; 0, 308, 0, 0; 0, 308, 0, 0" keyTimes="0; 0.5; 1" dur="3s" repeatCount="indefinite" />
<circle id="blackCircle" z-index="2" cx="550" cy="55" r="49" stroke-width="6" stroke="green" fill="none"/>
<animate id="fillBlack" xlink:href="#blackCircle" attributeName="stroke-dasharray" values="0, 154, 0, 154; 0, 154, 0, 154; 0, 0, 308, 0" dur="3s" keyTimes="0; 0.5; 1" repeatCount="indefinite" />
</circle>
</svg>

Related

how to make wavy line animation inside svg circle

I have a loader gif, but I want this animation using svg
[1]: https://i.stack.imgur.com/h3oJC.gif

Enjoy:
<svg>
<rect fill="blue" x="0" y="0" width="300" height="140"/>
<circle fill="white" cx="150" cy="70" r="60" stroke="blue" stroke-width="5" />
<path fill="none" stroke="blue" stroke-width="10" d="M0,0 Q 30,-30 60,0 Q 90,30 120,0 Q 150,-30 180,0 210,30 240,0">
<animateTransform attributeName="transform"
attributeType="XML"
type="translate"
from="-30 70"
to="90 70"
dur="1s"
repeatCount="indefinite"/>
</path>
</svg>

SVG bump point when animated line hover it

below i create a simple fiddle with svg animation:
<svg width="250" height="250" viewbox="0 0 20 20">
<line x1="10" y1="0" x2="10" y2="10"style="stroke:rgb(255,0,0); stroke-width:1">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 10 10" to="360 10 10" dur="7.5s" repeatCount="indefinite" />
</line>
<circle cx="5" cy="5" r="1" style="fill:rgb(0,255,0);"/>
<circle cx="15" cy="15" r="1" style="fill:rgb(0,0,255);"/>
</svg>
My question is: is there a way that I can make blue and red point bump (change their color for example) when red line hover them?
Thank you

This is my solution: I'm creating a mask with the line. There are 2 extra circles (fill:gold) that are masked by the line.
I'm putting the animated line inside a <g stroke="red"> because I want the used line to be white.
svg{border:1px solid;}
<svg width="250" height="250" viewbox="0 0 20 20">
<circle cx="5" cy="5" r="1" style="fill:rgb(0,255,0);" />
<circle cx="15" cy="15" r="1" style="fill:rgb(0,0,255);"/>
<mask id="mask">
<use xlink:href="#L" style="stroke:white"/>
</mask>
<g stroke="red">
<line id="L" x1="10" y1="0" x2="10" y2="10" >
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 10 10" to="360 10 10" dur="7.5s" repeatCount="indefinite" />
</line>
</g>
<g style="fill:gold;mask: url(#mask)">
<circle cx="5" cy="5" r="1" />
<circle cx="15" cy="15" r="1"/>
</g>
</svg>

How can I start all the animations at once?

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.
<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" opacity="0">
<set attributeName="opacity" to="1" begin="tap\-handle.click" repeatCount="0" fill="freeze" />
<animate id="animatePour" dur="0.1s" attributeName="opacity" from="1" to="0" begin="tap\-handle.click + 4.9s" repeatCount="0" fill="freeze" />
</path>
<g id="beer-glass_1_">
<g id="beer_1_">
<linearGradient id="beer-fill-g" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="0" stop-opacity="1" stop-color="#C06028">
<animate id="#animateBeer1"attributeName="offset" values="0;1" repeatCount="1" dur="5s" begin="tap\-handle.click" fill="freeze"/>
</stop>
<stop offset="0" stop-opacity="0" stop-color="#C06028">
<animate id="#animateBeer2" attributeName="offset" values="0;1" repeatCount="1" dur="5s" begin="tap\-handle.click" fill="freeze"/>
</stop>
</linearGradient>
<path id="beer-fill" fill-rule="evenodd" clip-rule="evenodd" fill="url(#beer-fill-g)" 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="tap\-handle.click + 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="tap\-handle.click + 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="tap\-handle.click + 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="tap\-handle.click + 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="tap\-handle.click + 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="tap\-handle.click + 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="tap\-handle.click + 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="tap\-handle.click + 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="tap\-handle.click + 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" transform="translate(0, 250)">
<animateTransform id="animateFoam"
attributeName="transform"
type="translate"
from="0 250"
to="0 0"
begin="tap\-handle.click"
dur="5s" fill="freeze"/>
</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="tap\-handle.click"
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>
Alternatively for browsers that can't handle SMIL escaping properly...
<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" opacity="0">
<set attributeName="opacity" to="1" begin="tapHandle.click" repeatCount="0" fill="freeze" />
<animate id="animatePour" dur="0.1s" attributeName="opacity" from="1" to="0" begin="tapHandle.click + 4.9s" repeatCount="0" fill="freeze" />
</path>
<g id="beer-glass_1_">
<g id="beer_1_">
<linearGradient id="beer-fill-g" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="0" stop-opacity="1" stop-color="#C06028">
<animate id="#animateBeer1"attributeName="offset" values="0;1" repeatCount="1" dur="5s" begin="tapHandle.click" fill="freeze"/>
</stop>
<stop offset="0" stop-opacity="0" stop-color="#C06028">
<animate id="#animateBeer2" attributeName="offset" values="0;1" repeatCount="1" dur="5s" begin="tapHandle.click" fill="freeze"/>
</stop>
</linearGradient>
<path id="beer-fill" fill-rule="evenodd" clip-rule="evenodd" fill="url(#beer-fill-g)" 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="tapHandle.click + 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="tapHandle.click + 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="tapHandle.click + 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="tapHandle.click + 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="tapHandle.click + 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="tapHandle.click + 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="tapHandle.click + 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="tapHandle.click + 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="tapHandle.click + 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" transform="translate(0, 250)">
<animateTransform id="animateFoam"
attributeName="transform"
type="translate"
from="0 250"
to="0 0"
begin="tapHandle.click"
dur="5s" fill="freeze"/>
</path>
</g>
<g id="tap">
<path id="tapHandle" 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="tapHandle.click"
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>

How to prevent animation easing / delay in SVG when looping?

Example, I want to make a SVG loader animation.
I got some transition / easing / delay when looping (I dont know what to call sorry)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 590 100">
<circle id="a1" cx="70" cy="70" r="20"/>
<circle id="a2" cx="120" cy="70" r="20"/>
<circle id="a3" cx="170" cy="70" r="20"/>
<circle id="a4" cx="220" cy="70" r="20"/>
<circle id="a5" cx="270" cy="70" r="20"/>
<circle id="a6" cx="320" cy="70" r="20"/>
<circle id="a7" cx="370" cy="70" r="20"/>
<circle id="a8" cx="420" cy="70" r="20"/>
<circle id="a9" cx="470" cy="70" r="20"/>
<circle id="a10" cx="520" cy="70" r="20"/>
<animate xlink:href="#a1" attributeName="visibility" from="hidden" to="visible" begin="0.1s" dur="1s" repeatCount="indefinite" />
<animate xlink:href="#a2" attributeName="visibility" from="hidden" to="visible" begin="0.2s" dur="1s" repeatCount="indefinite" />
<animate xlink:href="#a3" attributeName="visibility" from="hidden" to="visible" begin="0.3s" dur="1s" repeatCount="indefinite" />
<animate xlink:href="#a4" attributeName="visibility" from="hidden" to="visible" begin="0.4s" dur="1s" repeatCount="indefinite" />
<animate xlink:href="#a5" attributeName="visibility" from="hidden" to="visible" begin="0.5s" dur="1s" repeatCount="indefinite" />
<animate xlink:href="#a6" attributeName="visibility" from="hidden" to="visible" begin="0.6s" dur="1s" repeatCount="indefinite" />
<animate xlink:href="#a7" attributeName="visibility" from="hidden" to="visible" begin="0.7s" dur="1s" repeatCount="indefinite" />
<animate xlink:href="#a8" attributeName="visibility" from="hidden" to="visible" begin="0.8s" dur="1s" repeatCount="indefinite" />
<animate xlink:href="#a9" attributeName="visibility" from="hidden" to="visible" begin="0.9s" dur="1s" repeatCount="indefinite" />
<animate xlink:href="#a10" attributeName="visibility" from="hidden" to="visible" begin="1s" dur="1s" repeatCount="indefinite" />
</svg>
Look at this demo :
Those dots doesnt gone when animation done.
I just want to show dot running (one dot) (current demo is showing about 4 dots running)
How should i do , what I am missing ?

Aha, I think I got it by using value
Example : (10 steps)
values="visible;hidden;hidden;hidden;hidden;hidden;hidden;hidden;hidden;hidden;"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 590 100">
<circle id="a1" cx="70" cy="70" r="20"/>
<circle id="a2" cx="120" cy="70" r="20"/>
<circle id="a3" cx="170" cy="70" r="20"/>
<circle id="a4" cx="220" cy="70" r="20"/>
<circle id="a5" cx="270" cy="70" r="20"/>
<circle id="a6" cx="320" cy="70" r="20"/>
<circle id="a7" cx="370" cy="70" r="20"/>
<circle id="a8" cx="420" cy="70" r="20"/>
<circle id="a9" cx="470" cy="70" r="20"/>
<circle id="a10" cx="520" cy="70" r="20"/>
<animate xlink:href="#a1" attributeName="visibility" begin="0s" dur="1.3s" values="visible;hidden;hidden;hidden;hidden;hidden;hidden;hidden;hidden;hidden;" calcMode="linear" repeatCount="indefinite" />
<animate xlink:href="#a2" attributeName="visibility" begin="0s" dur="1.3s" values="hidden;visible;hidden;hidden;hidden;hidden;hidden;hidden;hidden;hidden;" calcMode="linear" repeatCount="indefinite" />
<animate xlink:href="#a3" attributeName="visibility" begin="0s" dur="1.3s" values="hidden;hidden;visible;hidden;hidden;hidden;hidden;hidden;hidden;hidden;" calcMode="linear" repeatCount="indefinite" />
<animate xlink:href="#a4" attributeName="visibility" begin="0s" dur="1.3s" values="hidden;hidden;hidden;visible;hidden;hidden;hidden;hidden;hidden;hidden;" calcMode="linear" repeatCount="indefinite" />
<animate xlink:href="#a5" attributeName="visibility" begin="0s" dur="1.3s" values="hidden;hidden;hidden;hidden;visible;hidden;hidden;hidden;hidden;hidden;" calcMode="linear" repeatCount="indefinite" />
<animate xlink:href="#a6" attributeName="visibility" begin="0s" dur="1.3s" values="hidden;hidden;hidden;hidden;hidden;visible;hidden;hidden;hidden;hidden;" calcMode="linear" repeatCount="indefinite" />
<animate xlink:href="#a7" attributeName="visibility" begin="0s" dur="1.3s" values="hidden;hidden;hidden;hidden;hidden;hidden;visible;hidden;hidden;hidden;" calcMode="linear" repeatCount="indefinite" />
<animate xlink:href="#a8" attributeName="visibility" begin="0s" dur="1.3s" values="hidden;hidden;hidden;hidden;hidden;hidden;hidden;visible;hidden;hidden;" calcMode="linear" repeatCount="indefinite" />
<animate xlink:href="#a9" attributeName="visibility" begin="0s" dur="1.3s" values="hidden;hidden;hidden;hidden;hidden;hidden;hidden;hidden;visible;hidden;" calcMode="linear" repeatCount="indefinite" />
<animate xlink:href="#a10" attributeName="visibility" begin="0s" dur="1.3s" values="hidden;hidden;hidden;hidden;hidden;hidden;hidden;hidden;hidden;visible;" calcMode="linear" repeatCount="indefinite" />
</svg>

Why has my SMIL animation stopped working?

I did a simple loading icon with six rectangles that darken in series, my image is:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 60 60">
<g transform="translate(30,30)">
<g transform="rotate(0)">
<rect id="rect1" x="-3" y="9" rx="3" ry="3" width="6" height="20">
<animateColor id="a1b" begin="0s;a6b.end" attributeName="fill" values="white;black" fill="freeze" dur=".5s" />
<animateColor id="a1w" begin="1s;a6w.end" attributeName="fill" values="black;white" fill="freeze" dur=".5s" />
</rect>
</g>
<g transform="rotate(60)">
<rect id="rect2" x="-3" y="9" rx="3" ry="3" width="6" height="20">
<animateColor id="a2b" begin="a1b.end" attributeName="fill" values="white;black" fill="freeze" dur=".5s" />
<animateColor id="a2w" begin="a1w.end" attributeName="fill" values="black;white" fill="freeze" dur=".5s" />
</rect>
</g>
⋮
<g transform="rotate(300)">
<rect id="rect6" x="-3" y="9" rx="3" ry="3" width="6" height="20">
<animateColor id="a6b" begin="a5b.end" attributeName="fill" values="white;black" fill="freeze" dur=".5s" />
<animateColor id="a6w" begin="a5w.end" attributeName="fill" values="black;white" fill="freeze" dur=".5s" />
</rect>
</g>
</g>
</svg>
When I initially created the document, this structure worked. Now it doesn't. Anyone know why?

The <animateColor> elements was deprecated in SVG 1.1 and is being completely removed for SVG 2. Some browsers are removing it already.
To achieve the same effect, just use <animate> with all the same attributes.
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 60 60" style="width:100vmin">
<defs>
<title>Loading Icon</title>
<style type="text/css">
rect {
stroke: black;
stroke-width: .75;
fill: transparent;
}
</style>
<rect id="bar" x="-3" y="9" rx="3" ry="3" width="6" height="20"/>
</defs>
<g transform="translate(30,30)">
<g transform="rotate(0)">
<rect id="rect1" x="-3" y="9" rx="3" ry="3" width="6" height="20">
<animate id="a1b" attributeName="fill" values="white;black" fill="freeze" dur=".5s" begin="0s;a6b.end" />
<animate id="a1w" attributeName="fill" values="black;white" fill="freeze" dur=".5s" begin="1s;a6w.end" />
</rect>
</g>
<g transform="rotate(60)">
<rect id="rect2" x="-3" y="9" rx="3" ry="3" width="6" height="20">
<animate id="a2b" attributeName="fill" values="white;black" fill="freeze" dur=".5s" begin="a1b.end" />
<animate id="a2w" attributeName="fill" values="black;white" fill="freeze" dur=".5s" begin="a1w.end" />
</rect>
</g>
<g transform="rotate(120)">
<rect id="rect3" x="-3" y="9" rx="3" ry="3" width="6" height="20">
<animate id="a3b" attributeName="fill" values="white;black" fill="freeze" dur=".5s" begin="a2b.end" />
<animate id="a3w" attributeName="fill" values="black;white" fill="freeze" dur=".5s" begin="a2w.end" />
</rect>
</g>
<g transform="rotate(180)">
<rect id="rect4" x="-3" y="9" rx="3" ry="3" width="6" height="20">
<animate id="a4b" attributeName="fill" values="white;black" fill="freeze" dur=".5s" begin="a3b.end" />
<animate id="a4w" attributeName="fill" values="black;white" fill="freeze" dur=".5s" begin="a3w.end" />
</rect>
</g>
<g transform="rotate(240)">
<rect id="rect5" x="-3" y="9" rx="3" ry="3" width="6" height="20">
<animate id="a5b" attributeName="fill" values="white;black" fill="freeze" dur=".5s" begin="a4b.end" />
<animate id="a5w" attributeName="fill" values="black;white" fill="freeze" dur=".5s" begin="a4w.end" />
</rect>
</g>
<g transform="rotate(300)">
<rect id="rect6" x="-3" y="9" rx="3" ry="3" width="6" height="20">
<animate id="a6b" attributeName="fill" values="white;black" fill="freeze" dur=".5s" begin="a5b.end" />
<animate id="a6w" attributeName="fill" values="black;white" fill="freeze" dur=".5s" begin="a5w.end" />
</rect>
</g>
</g>
</svg>

Resources