animate
The SVG animate element provides a way to animate an attribute of an element over time.
Usually, this element is created with:
const animate = parentElement.add('animate')It's possible to create it as a disconnected element with gSVG('animate') and attach it to the SVG document with .attachTo().
.attributeName()
.attributeName() defines the attribute to animate.
.from() and .to()
.from() and .to() must be used for defining the initial and finish values of this attribute.
.dur()
.dur() defines the animation duration ('1s' or '1000ms' are valid values).
.fill()
.fill() defines the final state of the animation. If the value is 'freeze', the state of the last animation frame is kept, but by default is 'remove', and as a result, after the last animation frame, the attribute value returns to the first.
.begin() and .beginElement()
For control about when the animation is running, we can configure the animate element .begin('indefinite') and call to .beginElement() for execute the animation.
With .values() and .keyTimes() you can define with more precision the animation, establishing the values that the property has to have in each moment.
Parent elements: a | circle | clipPath | defs | ellipse | feBlend | feColorMatrix | feComposite | feConvolveMatrix | feDisplacementMap | feDistantLight | feDropShadow | feFlood | feFuncA | feFuncB | feFuncG | feFuncR | feGaussianBlur | feImage | feMergeNode | feMorphology | feOffset | fePointLight | feSpotLight | feTile | feTurbulence | filter | g | image | line | linearGradient | marker | mask | path | pattern | polygon | polyline | radialGradient | rect | stop | svg | switch | symbol | text | textPath | tspan | use.