How to drag a SVG to start an animation? - svg
I have made a beer tap where you can click on the handle to start the animation.
I would like to change it so that you have to click and drag the handle back to start the animation. How would something like this be achieved?
If you cannot drag to activate the animation. How can I speed up the pulling back animation and freeze it at the pulled back position until complete?
I would also like to know why the small bubbles do not stop and reset when the handle is clicked again like the rests of the animation?
JsFiddle to SVG
<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)"opacity="0">
<set attributeName="opacity" to="1" begin="taphandle.click" repeatCount="0" fill="freeze" />
<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="#888888" 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="#999999" 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>
Related
Animate SVG with animateTransform (translate + skew)
How can I make the red bar skew into the position of the green? I am trying to animate a logo with SVG animation. Therefore I am using skewX and transition for the animateTransform, but somehow only the skewX animation is executed. The transition seems not to work. (if I run the animations without the text part it works, but all together, seems to be conflicting. Updated (to be more clear): The group with the ID "Bar-Falling" has 2 animations: <animateTransform attributeName="transform" type="skewX" .. and <animateTransform attributeName="transform" type="translate" ... Why is the translate animation not working? Any help appreciated. <svg xmlns="http://www.w3.org/2000/svg" width="1492.94" height="157.41" viewBox="0 0 1492.94 157.41"> <g id="Socia"> <path d="M36,117.5a23,23,0,0,0,7.3,8.5A29.61,29.61,0,0,0,54,130.8a48.92,48.92,0,0,0,12.6,1.6,75.9,75.9,0,0,0,9.5-.7,34.66,34.66,0,0,0,9.5-2.8A21.28,21.28,0,0,0,93,123a14.49,14.49,0,0,0,3-9.4,13.49,13.49,0,0,0-3.9-9.9,30,30,0,0,0-10.2-6.3A107,107,0,0,0,67.58,93c-5.3-1.3-10.8-2.7-16.3-4.2a130.32,130.32,0,0,1-16.4-5.2,55.48,55.48,0,0,1-14.3-7.9,36.83,36.83,0,0,1-10.4-12.2,36.88,36.88,0,0,1-3.9-17.6,38.27,38.27,0,0,1,5-20.1,44.16,44.16,0,0,1,13-14.2,55.38,55.38,0,0,1,18.1-8.4A76.8,76.8,0,0,1,62.58.5a102.66,102.66,0,0,1,22.7,2.6,56.65,56.65,0,0,1,19.3,8.5A43.2,43.2,0,0,1,118,26.7,46.44,46.44,0,0,1,123,49H91a29,29,0,0,0-2.9-11.2,19.51,19.51,0,0,0-6.4-7,29.43,29.43,0,0,0-9.2-3.6,53.39,53.39,0,0,0-11.3-1,42.55,42.55,0,0,0-8,.8,21.89,21.89,0,0,0-7.3,2.9,19.1,19.1,0,0,0-5.3,5.3,14.83,14.83,0,0,0-2.2,8,12.77,12.77,0,0,0,1.8,7.1,15.36,15.36,0,0,0,6.6,5.2,81.69,81.69,0,0,0,13.7,4.6c5.8,1.5,13.5,3.5,22.9,5.9,2.8.6,6.7,1.6,11.7,3.1A55.17,55.17,0,0,1,110,76.2a45.3,45.3,0,0,1,12.8,13c3.6,5.4,5.3,12.3,5.3,20.8a45.31,45.31,0,0,1-4,19.2,40.82,40.82,0,0,1-11.9,15.1,55.62,55.62,0,0,1-19.5,10,95.22,95.22,0,0,1-27.1,3.6,93.77,93.77,0,0,1-24.2-2.9,62,62,0,0,1-20.7-9.6,47.67,47.67,0,0,1-14.2-16.7,48.29,48.29,0,0,1-5.3-24.1h32.1A28.77,28.77,0,0,0,36,117.5" transform="translate(-1.14 -0.5)" style="fill: #fac800"/> <path d="M143.18,76.75a49.66,49.66,0,0,1,29.1-29.7,68,68,0,0,1,46.5,0A49.82,49.82,0,0,1,248,76.75a66,66,0,0,1,4,23.7,65.09,65.09,0,0,1-4,23.6,51.54,51.54,0,0,1-11.4,18,48.77,48.77,0,0,1-17.8,11.5,64.22,64.22,0,0,1-23.3,4,65.49,65.49,0,0,1-23.2-4,49.62,49.62,0,0,1-17.8-11.5,51.54,51.54,0,0,1-11.4-18,65.82,65.82,0,0,1-4-23.6,68.74,68.74,0,0,1,4.1-23.7m27.2,36.5a34.71,34.71,0,0,0,4.3,11.2,22.7,22.7,0,0,0,8.1,7.9,24.48,24.48,0,0,0,12.7,2.9,26.12,26.12,0,0,0,12.8-2.9,22.2,22.2,0,0,0,8.2-7.9,31.81,31.81,0,0,0,4.3-11.2,61.1,61.1,0,0,0,1.3-12.8,62.74,62.74,0,0,0-1.3-12.9,31.81,31.81,0,0,0-4.3-11.2,23.82,23.82,0,0,0-8.2-7.9,25.79,25.79,0,0,0-12.8-3.1,23.71,23.71,0,0,0-12.7,3.1,24.48,24.48,0,0,0-8.1,7.9,31.81,31.81,0,0,0-4.3,11.2,61.37,61.37,0,0,0-1.3,12.9,60.43,60.43,0,0,0,1.3,12.8" transform="translate(-1.14 -0.5)" style="fill: #fac800"/> <path d="M320.53,65.1a20.57,20.57,0,0,0-12,3.3,26.45,26.45,0,0,0-7.9,8.4,35.46,35.46,0,0,0-4.3,11.5,65.27,65.27,0,0,0-1.3,12.4,53.8,53.8,0,0,0,1.3,12,40.1,40.1,0,0,0,4.1,11.1,24.56,24.56,0,0,0,7.6,8.1,21.19,21.19,0,0,0,11.8,3.2c7.2,0,12.7-2,16.6-6a28.73,28.73,0,0,0,7.3-16.1h29c-2,14.5-7.6,25.5-16.9,33.1s-21.2,11.4-35.6,11.4a59.53,59.53,0,0,1-22.5-4.2,50.81,50.81,0,0,1-17.4-11.5,51.79,51.79,0,0,1-11.2-17.6,61.58,61.58,0,0,1-4-22.4,72.21,72.21,0,0,1,3.7-23.5,53.89,53.89,0,0,1,10.9-18.8,48.82,48.82,0,0,1,17.5-12.3,57.9,57.9,0,0,1,23.6-4.4,69.64,69.64,0,0,1,18.7,2.5,50.38,50.38,0,0,1,16,7.7,39.67,39.67,0,0,1,16.6,31h-29.3c-2.1-12.7-9.5-19-22.3-18.9" transform="translate(-1.14 -0.5)" style="fill: #fac800"/> <rect x="386.78" y="44.39" width="29.9" height="109" style="fill: #fac800"/> <rect x="386.48" y="3.5" width="29.9" height="24.39" style="fill: #fac800"/> <path d="M508.33,111.74a49.13,49.13,0,0,1-.5,6.7,24,24,0,0,1-2.8,8.3,20.12,20.12,0,0,1-7.1,7.1c-3.2,2-7.8,3-13.7,3a39.35,39.35,0,0,1-6.9-.6,17.52,17.52,0,0,1-5.9-2.2,10.38,10.38,0,0,1-4-4.3,16.38,16.38,0,0,1,0-13.7,13,13,0,0,1,3.9-4.5,17.82,17.82,0,0,1,5.7-2.8q3.3-1,6.6-1.8c2.4-.4,4.8-.8,7.1-1.1s4.7-.6,6.9-1a42.07,42.07,0,0,0,6.1-1.6,12.08,12.08,0,0,0,4.7-2.6ZM469,78.54c.6-5.9,2.5-10.1,5.9-12.7s8-3.8,14-3.8a63,63,0,0,1,7.5.5,16.4,16.4,0,0,1,6.1,2.1,11.81,11.81,0,0,1,4.2,4.4,15.71,15.71,0,0,1,1.6,7.7,8.25,8.25,0,0,1-2.7,7.1,20.59,20.59,0,0,1-8.1,3.7,75.83,75.83,0,0,1-11.6,1.9c-4.3.4-8.8,1-13.3,1.7a120.86,120.86,0,0,0-13.3,2.8,39.23,39.23,0,0,0-11.8,5.3,27.7,27.7,0,0,0-8.4,9.6,32.25,32.25,0,0,0-3.3,15.3,34.11,34.11,0,0,0,2.8,14.5,27,27,0,0,0,7.9,10.1,33.43,33.43,0,0,0,11.9,6,54.46,54.46,0,0,0,14.5,1.9,66.48,66.48,0,0,0,19.8-3,39.48,39.48,0,0,0,16.9-10.3,45.11,45.11,0,0,0,.7,5.3,33.42,33.42,0,0,0,1.4,5.2h30.4a25.69,25.69,0,0,1-3-10.1,112.67,112.67,0,0,1-.8-14.2V73a26.57,26.57,0,0,0-4.4-16,29.58,29.58,0,0,0-11.5-9.2,51.51,51.51,0,0,0-15.4-4.5,116.21,116.21,0,0,0-16.7-1.2,90.08,90.08,0,0,0-18,1.8,51.32,51.32,0,0,0-16.1,6,36.1,36.1,0,0,0-11.8,11.2,34.16,34.16,0,0,0-5.3,17.5Z" transform="translate(-1.14 -0.5)" style="fill: #fac800"/> </g> <g id="Bar-Falling"> <rect x="555.29" y="3.59" width="33.1" height="150.6" style="fill: #F11344" > <animateTransform attributeName="transform" type="skewX" from="0" to="-20" begin="0.5s" dur="0.2s" repeatCount="1" fill="freeze"/> <animateTransform attributeName="transform" type="translate" from="0" to="20" begin="0.5s" dur="0.2s" repeatCount="1" fill="freeze" additive="sum"/> </rect> </g> <g id="Placeholder-For-Where-Bar-Should-Be-Positioned-After-Animation"> <polygon points="645.83 3.59 588.13 154.19 555.63 154.19 613.33 3.59 645.83 3.59" style="fill: #00ff00"> </polygon> </g> <g id="Bar-1"> <rect x="666.29" y="3.59" width="33.1" height="150.6" style="fill: #fac800"> <animate attributeType="CSS" attributeName="opacity" begin="0.2s" from="0" to="1" dur="1s"/> <animate attributeType="CSS" attributeName="opacity" from="0" to="0" dur="0.2s"/> </rect> </g> <g id="Bar-2"> <rect x="722.44" y="4.09" width="33.1" height="150.6" transform="translate(-1.37 1.61) rotate(-0.16)" style="fill: #fac800"> <animate attributeType="CSS" attributeName="opacity" begin="0.3s" from="0" to="1" dur="1s"/> <animate attributeType="CSS" attributeName="opacity" from="0" to="0" dur="0.3s"/> </rect> </g> <g id="Income"> <animateTransform attributeName="transform" type="translate" additive="sum" from="-120" to="0" begin="0s" dur="0.3s" repeatCount="1" fill="freeze" /> <rect id="I" x="777.18" y="3.59" width="33.1" height="150.6" style="fill: #fac800"> </rect> <path id="N" d="M862.43,45.82V61h.6a34,34,0,0,1,14.8-13.8,42.53,42.53,0,0,1,18.5-4.3,51.05,51.05,0,0,1,19.7,3.3,29.52,29.52,0,0,1,12.2,9,35.46,35.46,0,0,1,6.2,14.2,95.87,95.87,0,0,1,1.8,18.5v67h-30V93.22q0-13.5-4.2-20.1c-2.8-4.4-7.8-6.7-15-6.7-8.1,0-14.1,2.4-17.8,7.3s-5.5,12.8-5.5,23.9v57.2h-29.9v-109Z" transform="translate(-1.14 -0.5)" style="fill: #fac800"> </path> <path id="C" d="M1008.48,65.1a21.34,21.34,0,0,0-12,3.3,25.09,25.09,0,0,0-7.8,8.4,35.79,35.79,0,0,0-4.3,11.4,65.27,65.27,0,0,0-1.3,12.4,53.8,53.8,0,0,0,1.3,12,40.1,40.1,0,0,0,4.1,11.1,24.89,24.89,0,0,0,7.6,8.2,21.41,21.41,0,0,0,11.8,3.2c7.1,0,12.6-2,16.6-6a28.73,28.73,0,0,0,7.3-16.1h28.9c-2,14.5-7.6,25.5-16.9,33.1s-21.1,11.4-35.6,11.3a57.17,57.17,0,0,1-22.4-4.2,50.81,50.81,0,0,1-17.4-11.5,51.79,51.79,0,0,1-11.2-17.6,61.58,61.58,0,0,1-4-22.4,72.21,72.21,0,0,1,3.7-23.5,53.89,53.89,0,0,1,10.9-18.8,48.82,48.82,0,0,1,17.5-12.3,57.9,57.9,0,0,1,23.6-4.4,69.64,69.64,0,0,1,18.7,2.5,50.38,50.38,0,0,1,16,7.7,39.7,39.7,0,0,1,16.6,31.1h-29.3c-2.1-12.7-9.5-18.9-22.4-18.9" transform="translate(-1.14 -0.5)" style="fill: #fac800"> </path> <path id="O" d="M1075.53,76.75a49.66,49.66,0,0,1,29.1-29.7,68,68,0,0,1,46.5,0,49.82,49.82,0,0,1,29.2,29.7,66,66,0,0,1,4,23.7,65.09,65.09,0,0,1-4,23.6,51.54,51.54,0,0,1-11.4,18,48.77,48.77,0,0,1-17.8,11.5,64.22,64.22,0,0,1-23.3,4,65.49,65.49,0,0,1-23.2-4,49.62,49.62,0,0,1-17.8-11.5,51.54,51.54,0,0,1-11.4-18,65.82,65.82,0,0,1-4-23.6,68.74,68.74,0,0,1,4.1-23.7m27.2,36.5a34.71,34.71,0,0,0,4.3,11.2,22.7,22.7,0,0,0,8.1,7.9,24.48,24.48,0,0,0,12.7,2.9,26.12,26.12,0,0,0,12.8-2.9,22.2,22.2,0,0,0,8.2-7.9,31.81,31.81,0,0,0,4.3-11.2,61.1,61.1,0,0,0,1.3-12.8,62.74,62.74,0,0,0-1.3-12.9,31.81,31.81,0,0,0-4.3-11.2,23.82,23.82,0,0,0-8.2-7.9,25.79,25.79,0,0,0-12.8-3.1,23.71,23.71,0,0,0-12.7,3.1,24.48,24.48,0,0,0-8.1,7.9,31.81,31.81,0,0,0-4.3,11.2,61.37,61.37,0,0,0-1.3,12.9,60.43,60.43,0,0,0,1.3,12.8" transform="translate(-1.14 -0.5)" style="fill: #fac800"> </path> <path id="M" d="M1229.53,45.34v14.8h.4a42.4,42.4,0,0,1,14.2-13.1,37.49,37.49,0,0,1,19.1-4.6,42.79,42.79,0,0,1,19,4.1,26.94,26.94,0,0,1,13,14.2,47,47,0,0,1,13.2-12.7,36,36,0,0,1,19.7-5.5,61.65,61.65,0,0,1,16,2.1,32.63,32.63,0,0,1,12.6,6.7,30.31,30.31,0,0,1,8.2,12.1,50.43,50.43,0,0,1,3,18v72.9H1338V92.64c0-3.6-.2-7.1-.4-10.3a22.39,22.39,0,0,0-2.3-8.4,14,14,0,0,0-5.6-5.7,20.34,20.34,0,0,0-10-2.2,19,19,0,0,0-10.2,2.4,17,17,0,0,0-6.1,6.4,25.86,25.86,0,0,0-2.9,8.9,67.25,67.25,0,0,0-.7,10v60.7h-29.9V93.24c0-3.2,0-6.4-.2-9.6a26.56,26.56,0,0,0-1.8-8.8,13.84,13.84,0,0,0-5.3-6.4,20.26,20.26,0,0,0-10.8-2.5,21.25,21.25,0,0,0-5.6,1,16.77,16.77,0,0,0-6.7,3.6,22.1,22.1,0,0,0-5.6,7.6,30.3,30.3,0,0,0-2.3,13v63.4h-29.9v-109Z" transform="translate(-1.14 -0.5)" style="fill: #fac800"> </path> <path id="E" d="M1422.58,128c4.5,4.4,11,6.5,19.4,6.5a27.06,27.06,0,0,0,15.6-4.5c4.3-3,7-6.2,8-9.6H1492c-4.2,13-10.7,22.4-19.4,28s-19.2,8.5-31.6,8.4a62.37,62.37,0,0,1-23.3-4.2,49.43,49.43,0,0,1-17.5-11.7,53.12,53.12,0,0,1-10.9-18.1,65.4,65.4,0,0,1-3.9-23.2,63.24,63.24,0,0,1,3.9-22.8,52.6,52.6,0,0,1,29-30.4A57,57,0,0,1,1441,42a51.87,51.87,0,0,1,24.2,5.3,48.45,48.45,0,0,1,17,14.5,58.48,58.48,0,0,1,9.6,20.7,76.29,76.29,0,0,1,2.1,24.3h-78.7c.5,9.8,2.9,16.9,7.4,21.2m33.9-57.3c-3.6-3.9-9-5.9-16.3-5.9a27,27,0,0,0-11.9,2.4,23.25,23.25,0,0,0-7.6,6,21.33,21.33,0,0,0-4,7.6,34.33,34.33,0,0,0-1.4,7.1h48.6c-1.4-7.6-3.9-13.3-7.4-17.2" transform="translate(-1.14 -0.5)" style="fill: #fac800"> </path> </g> </svg>
Animate SVG circle from small to large and back to small
Without using css and js, I would like to animate this svg. I would like for the circles to go from small to large and then back to small. I've gotten the animation to work for small to large but now I can't seem to figure out how to get them to return to their original size. <svg xmlns="http://www.w3.org/2000/svg"> <circle cx="6" cy="8" r="1" style="fill:steelblue;"> <animate attributeType="XML" attributeName="r" from="1" to="6" dur="1s" begin=".25s" repeatCount="indefinite" /> </circle> <circle cx="18" cy="8" r="1" style="fill:red;"> <animate attributeType="XML" attributeName="r" from="1" to="6" dur="1s" begin=".5s" repeatCount="indefinite" /> </circle> <circle cx="30" cy="8" r="1" style="fill:orange;"> <animate attributeType="XML" attributeName="r" from="1" to="6" dur="1s" begin=".75s" repeatCount="indefinite" /> </circle> <circle cx="42" cy="8" r="1" style="fill:green;"> <animate attributeType="XML" attributeName="r" from="1" to="6" dur="1s" begin="1s" repeatCount="indefinite" /> </circle> </svg> Focusing on the 1st circle, I'd like to go from r="1" to r="6" and then back to r="1". This should happen within dur="1s". Is this possible? If so how? Again, without using external JS or CSS. Thanks!
Instead of from and to, use values to list a series of values that it should animate between. <svg xmlns="http://www.w3.org/2000/svg"> <circle cx="6" cy="8" r="1" style="fill:steelblue;"> <animate attributeType="XML" attributeName="r" values="1;6;1" dur="1s" begin="0.25s" repeatCount="indefinite" /> </circle> <circle cx="18" cy="8" r="1" style="fill:red;"> <animate attributeType="XML" attributeName="r" values="1;6;1" dur="1s" begin="0.5s" repeatCount="indefinite" /> </circle> <circle cx="30" cy="8" r="1" style="fill:orange;"> <animate attributeType="XML" attributeName="r" values="1;6;1" dur="1s" begin="0.75s" repeatCount="indefinite" /> </circle> <circle cx="42" cy="8" r="1" style="fill:green;"> <animate attributeType="XML" attributeName="r" values="1;6;1" dur="1s" begin="1s" repeatCount="indefinite" /> </circle> </svg>
SVG line rotation and animation
I'm trying to have a line moving between two points. In order to need only one gradient, I'm rotating the line using transform. See this for details : SVG gradients direction Now when I apply the animation on the line it behaves strangely. It's not going anywhere near the real destination, and I don't really understand what's happening. Which is particulary weird is that if I remove the rotate transformation, the lines goes to the right point (but then obviously it's not having the right gradient). <svg height="670.9" width="1920"> <defs> <linearGradient y2="100%" x2="100%" y1="0%" x1="0%" id="linegradred"> <stop style="stop-color:#F70D1A;stop-opacity:0" offset="0%" /> <stop style="stop-color:#F70D1A;stop-opacity:0.3" offset="50%" /> <stop style="stop-color:#F70D1A;stop-opacity:0.8" offset="100%" /> </linearGradient> </defs> <circle cx="964" cy="426" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc"/> <circle cx="924" cy="230" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" /> <line class="svg_line_red" id="line_1442197044254" x1="964" y1="426" fill="url(#linegradred)" stroke="url(#linegradred)" x2="1030" y2="492" transform="rotate(-146.5346206536447 964 426)"> <animate attributeName="x1" attributeType="XML" to="924" fill="freeze" dur="1.1s" /> <animate attributeName="y1" attributeType="XML" to="230" fill="freeze" dur="1.1s" /> <animate attributeName="x2" attributeType="XML" to="924" fill="freeze" dur="1s" /> <animate attributeName="y2" attributeType="XML" to="230" fill="freeze" dur="1s" /> </line> <circle cx="590" cy="344" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" /> <circle cx="924" cy="230" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" /> <line class="svg_line_red" id="line_1442197045251" x1="590" y1="344" fill="url(#linegradred)" stroke="url(#linegradred)" x2="707" y2="461" transform="rotate(-63.84566422168709 590 344)"> <animate attributeName="x1" attributeType="XML" to="924" fill="freeze" dur="1.1s" /> <animate attributeName="y1" attributeType="XML" to="230" fill="freeze" dur="1.1s" /> <animate attributeName="x2" attributeType="XML" to="924" fill="freeze" dur="1s" /> <animate attributeName="y2" attributeType="XML" to="230" fill="freeze" dur="1s" /> </line> <circle cx="771" cy="363" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" /> <circle cx="924" cy="230" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" /> <line class="svg_line_red" id="line_1442197046253" x1="771" y1="363" fill="url(#linegradred)" stroke="url(#linegradred)" x2="838" y2="430" transform="rotate(-85.99981423948691 771 363)"> <animate attributeName="x1" attributeType="XML" to="924" fill="freeze" dur="1.1s" /> <animate attributeName="y1" attributeType="XML" to="230" fill="freeze" dur="1.1s" /> <animate attributeName="x2" attributeType="XML" to="924" fill="freeze" dur="1s" /> <animate attributeName="y2" attributeType="XML" to="230" fill="freeze" dur="1s" /> </line> </svg> Here's a fiddle : https://jsfiddle.net/qj7z2hhr/ Any help to understand why this behaves like that would be greatly appreciated.
In SVG files, anything that is lower in the hierarchy is affected by things in their ancestor elements. So all the coordinates in your animations are also being affected by the rotation you are applying to their parent element (the line). If you want to fix it, you will have to apply the translate animation after (ie. higher up than) the rotation. One way you could do that would be to surround the line with a group. Apply the rotation to the line and an animateTransform to the group. Update Actually what I suggested wouldn't work. I didn't account for the fact that you are animating both the start and end points of the line. But I have another suggestion. Make each line be a vector based at (0,0) and be the length match the original line. I.e.: x1=0 y1=0 x2=(x2-x1) y2=(y2-y2) Then you can create your desired animation as a combination of three animation components. a translate between the original start and end points. a scale from 1 to 0 to make the start and end converge to a single point a fixed rotation transform to make your line and gradient point in the correct direction Here's the result. I've just implemented two of the lines to show you how it works. I'll leave you to decide whether this is simpler than just having multiple gradients, or not. <svg viewBox="0 0 1920 670.9"> <defs> <linearGradient y2="100%" x2="100%" y1="0%" x1="0%" id="linegradred"> <stop style="stop-color:#F70D1A;stop-opacity:0" offset="0%" /> <stop style="stop-color:#F70D1A;stop-opacity:0.3" offset="50%" /> <stop style="stop-color:#F70D1A;stop-opacity:0.8" offset="100%" /> </linearGradient> </defs> <circle cx="964" cy="426" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc"/> <circle cx="924" cy="230" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" /> <line class="svg_line_red" id="line_1442197044254" x2="66" y2="66" fill="url(#linegradred)" stroke="url(#linegradred)"> <animateTransform attributeName="transform" attributeType="XML" type="translate" from="964 426" to="924 230" dur="1.1s" additive="sum" fill="freeze" /> <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="0" dur="1.1s" additive="sum" fill="freeze" /> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-146.5" to="-146.5" dur="1.1s" additive="sum" fill="freeze" /> </line> <circle cx="590" cy="344" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" /> <circle cx="924" cy="230" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" /> <line class="svg_line_red" id="line_1442197045251" x2="117" y2="116" fill="url(#linegradred)" stroke="url(#linegradred)"> <animateTransform attributeName="transform" attributeType="XML" type="translate" from="590 344" to="924 230" dur="1.1s" additive="sum" fill="freeze" /> <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="0" dur="1.1s" additive="sum" fill="freeze" /> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-63.8" to="-63.8" dur="1.1s" additive="sum" fill="freeze" /> </line> </svg>
SVG animation not repeating properly
I am having some difficulty getting my SVG icons to repeat properly. I need them to repeat like a gif, individually and indefinitely. I can get only two to work but I need all three to repeat one after the other. Here is a js fiddle of the SVG animation in action. Code below https://jsfiddle.net/allanberlin/cma0ejkw/ <svg version="1.1" id="Layer_1" class="loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"> <g> <path fill="#FFFFFF" d="M46.5,68.5c-2.3,0-4.3-0.8-5.8-2.2l-7.1-7.2c0,0,0,0-0.1-0.1l0,0c-1.4-1.5-2.2-3.6-2.1-6.1 c0.2-7,6.9-15.7,14.8-19.7c5.3-2.6,10.1-2.5,12.9,0.2l0.1,0.1l0.1,0.1l7,7.2c0.3,0.3,0.7,0.8,0.9,1.2l0,0c0.8,1.3,1.2,3,1.2,4.9 c-0.2,7-6.9,15.8-14.8,19.7C51.1,67.9,48.7,68.5,46.5,68.5z M39.5,61.4l3.2,3.3c1.9,1.9,5.8,1.8,10-0.2c7-3.4,13.2-11.4,13.3-17.4 c0.1-1.4-0.2-2.5-0.8-3.4l0,0c-0.2-0.2-0.3-0.5-0.6-0.8l-3.1-3.2c0,0.1,0,0.2,0,0.2s0,0.2,0,0.3c-0.4,7-6.9,15.5-14.8,19.3l0,0 c-2.3,1.2-4.6,1.8-6.7,1.8l0,0C39.8,61.4,39.6,61.4,39.5,61.4z M35.5,57.4c0.3,0.3,0.7,0.6,1.1,0.8c0.2,0.1,0.3,0.2,0.5,0.2 c0.3,0.1,0.7,0.2,1,0.2c0.2,0,0.4,0.1,0.7,0.1c1.1-6.7,7.3-14.4,14.6-18c1.8-0.9,3.8-1.5,5.4-1.8c-0.1-1.3-0.5-2.4-1.2-3.2 c0,0-0.1,0-0.1-0.1c-1.9-2-5.8-1.9-10.1,0.2c-7,3.4-13.2,11.4-13.3,17.4C34.1,54.9,34.5,56.4,35.5,57.4L35.5,57.4z M58.6,41.5 c-1.3,0.2-2.7,0.8-4.1,1.4c-6.4,3.1-11.9,9.8-13.1,15.6c1.3-0.3,2.7-0.8,4.1-1.4l0,0C52,54,57.5,47.3,58.6,41.5z"/> <animate id="Circle" attributeName="visibility" from="hidden" to="visable" dur="1s" begin="0s; Mona.end"/> </g> <g> <path fill="#FFFFFF" d="M43.2,70.2l-16.1-8l21.4-32.5l24.3,35.2L43.2,70.2z M49.3,35.6l-4.4,31.7l23.4-4.2L49.3,35.6z M30.8,61.2 L42.3,67l4.1-29.3L30.8,61.2z"/> <animate id="Triangle" attributeName="visibility" from="hidden" to="visable" dur="1s" begin="2s; Circle.begin+1s"/> </g> <g> <path fill="#FFFFFF" d="M42.6,68l-20.2-7.1l0.5-1.2c0.3-0.5,5.2-12.5,7.1-16.6l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8 c0.4,0,0.8,0.1,1.2,0.2l0,0l0.2,0.1l9.2,3.2c1,0.3,2.1-0.1,2.5-1.1c0.3-0.6,0.5-1.1,0.6-1.3l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8l0,0 c0.5,0,1,0.1,1.4,0.2l1.3,0.4l0,0l16.4,5.8c1.8,0.6,2.9,2.4,2.8,4.8c-0.2,1.9-0.6,3.3-1.2,4.9l-0.4,1.2l-5.2-1.8 c-1-0.3-2.1,0.1-2.5,1.1c-1.9,4.4-4.9,11.3-4.9,11.4l-0.2,0.3c-1,2.1-2.2,4.6-5.1,3.9l0,0c0,0-0.1,0-0.4-0.2l0,0 c-0.1,0-0.1-0.1-0.2-0.1c-0.9-0.3-3.3-1.2-9.8-3.5c-1-0.3-2.1,0.1-2.5,1.1C44,64.6,43,66.9,43,66.9L42.6,68z M27.9,60.1l11.5,4 c1,0.3,2.1-0.1,2.5-1.1c0.6-1.4,1.4-3.3,2.2-5.2l0,0c0.1-0.2,0.2-0.3,0.2-0.5l0.3-0.6l0,0c1.1-2.7,2.4-5.8,3.2-7.4l0.2-0.3 c0.4-0.7,0.8-1.6,1.2-2.4c0.6-1.1,0.1-2.4-1-2.9l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3 c-1.3,2.7-4.1,9.3-5.8,13.3C26.2,58.5,26.8,59.7,27.9,60.1z M58.8,61.8c0.7,0.2,1.1-0.3,2.2-2.5l0.2-0.2c0-0.1,4.8-11.3,6.2-14.2 l0,0l0,0l0,0l0,0l0.5-1.1l0,0c0.3-0.7,0.7-1.5,1.1-2.2c0.6-1.1,0.1-2.4-1-2.8l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1l0,0 c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3c-0.1,0.1-0.2,0.4-0.4,0.8c-0.5,1.1,0.1,2.3,1.2,2.6l2.4,0.8l0,0c0.5,0.2,1,0.5,1.3,0.8 c0.9,0.9,1.4,2.5,1.4,4.5L58,59.3c0,0.7,0.2,1.9,0.7,2.2C58.6,61.7,58.7,61.7,58.8,61.8z M47.8,55.6c-0.5,1.1,0.1,2.3,1.2,2.7 c2,0.7,4.4,1.5,6.3,2.2c-0.1-0.6-0.1-1-0.1-1.2l0.1-10.5c0-1.2-0.3-2.2-0.7-2.7c-0.1-0.1-0.2-0.2-0.4-0.2l0,0l0,0 c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2L50,50.4C49.5,51.6,48.7,53.6,47.8,55.6z M72.3,45.3L72.3,45.3 c1.2,0.4,2.4-0.3,2.6-1.5c0-0.2,0.1-0.5,0.1-0.7c0.1-0.7,0-1.8-1-2.2l0,0c-0.2-0.1-0.4-0.1-0.7-0.1l0,0c-0.8,0-1.4,0.7-2,1.5 C70.6,43.4,71.1,44.8,72.3,45.3z"/> <animate id="Mona" attributeName="visibility" from="hidden" to="visable" dur="1s" begin="3s; Triangle.begin+1s"/> </g> </svg>
visible has two i's and no a.
Do you really want everything to appear at once. If not make the groups hidden by default as I've done.
body {
background-color: #aad5df;
}
<svg version="1.1" id="Layer_1" class="loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g visibility="hidden">
<path fill="#FFFFFF" d="M46.5,68.5c-2.3,0-4.3-0.8-5.8-2.2l-7.1-7.2c0,0,0,0-0.1-0.1l0,0c-1.4-1.5-2.2-3.6-2.1-6.1
c0.2-7,6.9-15.7,14.8-19.7c5.3-2.6,10.1-2.5,12.9,0.2l0.1,0.1l0.1,0.1l7,7.2c0.3,0.3,0.7,0.8,0.9,1.2l0,0c0.8,1.3,1.2,3,1.2,4.9
c-0.2,7-6.9,15.8-14.8,19.7C51.1,67.9,48.7,68.5,46.5,68.5z M39.5,61.4l3.2,3.3c1.9,1.9,5.8,1.8,10-0.2c7-3.4,13.2-11.4,13.3-17.4
c0.1-1.4-0.2-2.5-0.8-3.4l0,0c-0.2-0.2-0.3-0.5-0.6-0.8l-3.1-3.2c0,0.1,0,0.2,0,0.2s0,0.2,0,0.3c-0.4,7-6.9,15.5-14.8,19.3l0,0
c-2.3,1.2-4.6,1.8-6.7,1.8l0,0C39.8,61.4,39.6,61.4,39.5,61.4z M35.5,57.4c0.3,0.3,0.7,0.6,1.1,0.8c0.2,0.1,0.3,0.2,0.5,0.2
c0.3,0.1,0.7,0.2,1,0.2c0.2,0,0.4,0.1,0.7,0.1c1.1-6.7,7.3-14.4,14.6-18c1.8-0.9,3.8-1.5,5.4-1.8c-0.1-1.3-0.5-2.4-1.2-3.2
c0,0-0.1,0-0.1-0.1c-1.9-2-5.8-1.9-10.1,0.2c-7,3.4-13.2,11.4-13.3,17.4C34.1,54.9,34.5,56.4,35.5,57.4L35.5,57.4z M58.6,41.5
c-1.3,0.2-2.7,0.8-4.1,1.4c-6.4,3.1-11.9,9.8-13.1,15.6c1.3-0.3,2.7-0.8,4.1-1.4l0,0C52,54,57.5,47.3,58.6,41.5z" />
<animate id="Circle" attributeName="visibility" from="hidden" to="visible" dur="1s" begin="0s; Mona.end"/>
</g>
<g visibility="hidden">
<path fill="#FFFFFF" d="M43.2,70.2l-16.1-8l21.4-32.5l24.3,35.2L43.2,70.2z M49.3,35.6l-4.4,31.7l23.4-4.2L49.3,35.6z M30.8,61.2
L42.3,67l4.1-29.3L30.8,61.2z"/>
<animate id="Triangle" from="hidden" to="visible" dur="1s" attributeName="visibility" begin="Circle.begin+1s"/>
</g>
<g visibility="hidden">
<path fill="#FFFFFF" d="M42.6,68l-20.2-7.1l0.5-1.2c0.3-0.5,5.2-12.5,7.1-16.6l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8
c0.4,0,0.8,0.1,1.2,0.2l0,0l0.2,0.1l9.2,3.2c1,0.3,2.1-0.1,2.5-1.1c0.3-0.6,0.5-1.1,0.6-1.3l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8l0,0
c0.5,0,1,0.1,1.4,0.2l1.3,0.4l0,0l16.4,5.8c1.8,0.6,2.9,2.4,2.8,4.8c-0.2,1.9-0.6,3.3-1.2,4.9l-0.4,1.2l-5.2-1.8
c-1-0.3-2.1,0.1-2.5,1.1c-1.9,4.4-4.9,11.3-4.9,11.4l-0.2,0.3c-1,2.1-2.2,4.6-5.1,3.9l0,0c0,0-0.1,0-0.4-0.2l0,0
c-0.1,0-0.1-0.1-0.2-0.1c-0.9-0.3-3.3-1.2-9.8-3.5c-1-0.3-2.1,0.1-2.5,1.1C44,64.6,43,66.9,43,66.9L42.6,68z M27.9,60.1l11.5,4
c1,0.3,2.1-0.1,2.5-1.1c0.6-1.4,1.4-3.3,2.2-5.2l0,0c0.1-0.2,0.2-0.3,0.2-0.5l0.3-0.6l0,0c1.1-2.7,2.4-5.8,3.2-7.4l0.2-0.3
c0.4-0.7,0.8-1.6,1.2-2.4c0.6-1.1,0.1-2.4-1-2.9l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3
c-1.3,2.7-4.1,9.3-5.8,13.3C26.2,58.5,26.8,59.7,27.9,60.1z M58.8,61.8c0.7,0.2,1.1-0.3,2.2-2.5l0.2-0.2c0-0.1,4.8-11.3,6.2-14.2
l0,0l0,0l0,0l0,0l0.5-1.1l0,0c0.3-0.7,0.7-1.5,1.1-2.2c0.6-1.1,0.1-2.4-1-2.8l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1l0,0
c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3c-0.1,0.1-0.2,0.4-0.4,0.8c-0.5,1.1,0.1,2.3,1.2,2.6l2.4,0.8l0,0c0.5,0.2,1,0.5,1.3,0.8
c0.9,0.9,1.4,2.5,1.4,4.5L58,59.3c0,0.7,0.2,1.9,0.7,2.2C58.6,61.7,58.7,61.7,58.8,61.8z M47.8,55.6c-0.5,1.1,0.1,2.3,1.2,2.7
c2,0.7,4.4,1.5,6.3,2.2c-0.1-0.6-0.1-1-0.1-1.2l0.1-10.5c0-1.2-0.3-2.2-0.7-2.7c-0.1-0.1-0.2-0.2-0.4-0.2l0,0l0,0
c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2L50,50.4C49.5,51.6,48.7,53.6,47.8,55.6z M72.3,45.3L72.3,45.3
c1.2,0.4,2.4-0.3,2.6-1.5c0-0.2,0.1-0.5,0.1-0.7c0.1-0.7,0-1.8-1-2.2l0,0c-0.2-0.1-0.4-0.1-0.7-0.1l0,0c-0.8,0-1.4,0.7-2,1.5
C70.6,43.4,71.1,44.8,72.3,45.3z"/>
<animate id="Mona" attributeName="visibility" from="hidden" to="visible" dur="1s" begin="Triangle.begin+1s"/>
</g>
</svg>
Here's another way to do it, but without the flashing.
body {
background-color: #aad5df;
}
<svg version="1.1" id="Layer_1" class="loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
<path fill="#FFFFFF" d="M46.5,68.5c-2.3,0-4.3-0.8-5.8-2.2l-7.1-7.2c0,0,0,0-0.1-0.1l0,0c-1.4-1.5-2.2-3.6-2.1-6.1
c0.2-7,6.9-15.7,14.8-19.7c5.3-2.6,10.1-2.5,12.9,0.2l0.1,0.1l0.1,0.1l7,7.2c0.3,0.3,0.7,0.8,0.9,1.2l0,0c0.8,1.3,1.2,3,1.2,4.9
c-0.2,7-6.9,15.8-14.8,19.7C51.1,67.9,48.7,68.5,46.5,68.5z M39.5,61.4l3.2,3.3c1.9,1.9,5.8,1.8,10-0.2c7-3.4,13.2-11.4,13.3-17.4
c0.1-1.4-0.2-2.5-0.8-3.4l0,0c-0.2-0.2-0.3-0.5-0.6-0.8l-3.1-3.2c0,0.1,0,0.2,0,0.2s0,0.2,0,0.3c-0.4,7-6.9,15.5-14.8,19.3l0,0
c-2.3,1.2-4.6,1.8-6.7,1.8l0,0C39.8,61.4,39.6,61.4,39.5,61.4z M35.5,57.4c0.3,0.3,0.7,0.6,1.1,0.8c0.2,0.1,0.3,0.2,0.5,0.2
c0.3,0.1,0.7,0.2,1,0.2c0.2,0,0.4,0.1,0.7,0.1c1.1-6.7,7.3-14.4,14.6-18c1.8-0.9,3.8-1.5,5.4-1.8c-0.1-1.3-0.5-2.4-1.2-3.2
c0,0-0.1,0-0.1-0.1c-1.9-2-5.8-1.9-10.1,0.2c-7,3.4-13.2,11.4-13.3,17.4C34.1,54.9,34.5,56.4,35.5,57.4L35.5,57.4z M58.6,41.5
c-1.3,0.2-2.7,0.8-4.1,1.4c-6.4,3.1-11.9,9.8-13.1,15.6c1.3-0.3,2.7-0.8,4.1-1.4l0,0C52,54,57.5,47.3,58.6,41.5z" visibility="hidden">
<set id="Circle" attributeName="visibility" attributeType="CSS" to="visible"
begin="0s; Mona.end" dur="1s" fill="freeze"/>
<set attributeName="visibility" attributeType="CSS" to="hidden"
begin="Circle.end" fill="freeze"/>
</path>
</g>
<g>
<path fill="#FFFFFF" d="M43.2,70.2l-16.1-8l21.4-32.5l24.3,35.2L43.2,70.2z M49.3,35.6l-4.4,31.7l23.4-4.2L49.3,35.6z M30.8,61.2
L42.3,67l4.1-29.3L30.8,61.2z" visibility="hidden">
<set id="Triangle" attributeName="visibility" attributeType="CSS" to="visible"
begin="Circle.end" dur="1s" fill="freeze"/>
<set attributeName="visibility" attributeType="CSS" to="hidden"
begin="Triangle.end" fill="freeze"/>
</path>
</g>
<g>
<path fill="#FFFFFF" d="M42.6,68l-20.2-7.1l0.5-1.2c0.3-0.5,5.2-12.5,7.1-16.6l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8
c0.4,0,0.8,0.1,1.2,0.2l0,0l0.2,0.1l9.2,3.2c1,0.3,2.1-0.1,2.5-1.1c0.3-0.6,0.5-1.1,0.6-1.3l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8l0,0
c0.5,0,1,0.1,1.4,0.2l1.3,0.4l0,0l16.4,5.8c1.8,0.6,2.9,2.4,2.8,4.8c-0.2,1.9-0.6,3.3-1.2,4.9l-0.4,1.2l-5.2-1.8
c-1-0.3-2.1,0.1-2.5,1.1c-1.9,4.4-4.9,11.3-4.9,11.4l-0.2,0.3c-1,2.1-2.2,4.6-5.1,3.9l0,0c0,0-0.1,0-0.4-0.2l0,0
c-0.1,0-0.1-0.1-0.2-0.1c-0.9-0.3-3.3-1.2-9.8-3.5c-1-0.3-2.1,0.1-2.5,1.1C44,64.6,43,66.9,43,66.9L42.6,68z M27.9,60.1l11.5,4
c1,0.3,2.1-0.1,2.5-1.1c0.6-1.4,1.4-3.3,2.2-5.2l0,0c0.1-0.2,0.2-0.3,0.2-0.5l0.3-0.6l0,0c1.1-2.7,2.4-5.8,3.2-7.4l0.2-0.3
c0.4-0.7,0.8-1.6,1.2-2.4c0.6-1.1,0.1-2.4-1-2.9l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3
c-1.3,2.7-4.1,9.3-5.8,13.3C26.2,58.5,26.8,59.7,27.9,60.1z M58.8,61.8c0.7,0.2,1.1-0.3,2.2-2.5l0.2-0.2c0-0.1,4.8-11.3,6.2-14.2
l0,0l0,0l0,0l0,0l0.5-1.1l0,0c0.3-0.7,0.7-1.5,1.1-2.2c0.6-1.1,0.1-2.4-1-2.8l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1l0,0
c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3c-0.1,0.1-0.2,0.4-0.4,0.8c-0.5,1.1,0.1,2.3,1.2,2.6l2.4,0.8l0,0c0.5,0.2,1,0.5,1.3,0.8
c0.9,0.9,1.4,2.5,1.4,4.5L58,59.3c0,0.7,0.2,1.9,0.7,2.2C58.6,61.7,58.7,61.7,58.8,61.8z M47.8,55.6c-0.5,1.1,0.1,2.3,1.2,2.7
c2,0.7,4.4,1.5,6.3,2.2c-0.1-0.6-0.1-1-0.1-1.2l0.1-10.5c0-1.2-0.3-2.2-0.7-2.7c-0.1-0.1-0.2-0.2-0.4-0.2l0,0l0,0
c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2L50,50.4C49.5,51.6,48.7,53.6,47.8,55.6z M72.3,45.3L72.3,45.3
c1.2,0.4,2.4-0.3,2.6-1.5c0-0.2,0.1-0.5,0.1-0.7c0.1-0.7,0-1.8-1-2.2l0,0c-0.2-0.1-0.4-0.1-0.7-0.1l0,0c-0.8,0-1.4,0.7-2,1.5
C70.6,43.4,71.1,44.8,72.3,45.3z" visibility="hidden">
<set id="Mona" attributeName="visibility" attributeType="CSS" to="visible"
begin="Triangle.end" dur="1s" fill="freeze"/>
<set attributeName="visibility" attributeType="CSS" to="hidden"
begin="Mona.end" fill="freeze"/>
</path>
</g>
</svg>
svg begin="mouseover"not working
Im new at coding and am trying to make a simple line rotate around its center using svg. I have got the line rotating but everytime I add begin="mouseover" the animation no longer starts. If anyone could help me get this working with a hover event I will be greatly appreciated. <svg> <line id="line_01" x1="20" y1="100" x2="100" y2="20" stroke="black" stroke-width="2" stroke-linecap="round" /> <animateTransform xlink:href="#line_01" attributeName="transform" pointer-events="all" attributeType="XML" type="rotate" from="0 60 60" to="360 60 60" dur="3s" /> </svg>
You need to precede mouseover with the id of an element e.g. <svg width="100%" height="100%"> <line id="line_01" x1="20" y1="100" x2="100" y2="20" stroke="black" stroke-width="2" stroke-linecap="round" /> <animateTransform xlink:href="#line_01" begin="line_01.mouseover" attributeName="transform" pointer-events="all" attributeType="XML" type="rotate" from="0 60 60" to="360 60 60" dur="3s" /> </svg>