Animates a target attribute over time.

Donner currently supports linear and discrete interpolation for numeric values, number lists, compatible path data, and values that can be represented by the target attribute parser. Non-interpolable values fall back to discrete sampling.

DOM object: SVGAnimateElement
SVG Animations spec: https://svgwg.org/specs/animations/#AnimateElement

Warning: Animation support is experimental. Parse with SVGParser::Options::enableExperimental = true to create an SVGAnimateElement. Without that option, the parser preserves <animate> as an unknown element.

Example

<circle cx="30" cy="40" r="18" fill="#2563eb">
  <animate attributeName="cx" from="30" to="210"
           dur="2s" fill="freeze" />
</circle>

The snapshots below show the result at the beginning, midpoint, and end of the active interval:

Supported attributes

Attribute	Support
attributeName	Attribute to animate. Required for an override.
from, to, by	Endpoint forms. values takes precedence when present.
values	Semicolon-separated keyframe values.
calcMode	linear and discrete. paced and spline currently use linear sampling.
keyTimes	Normalized keyframe times when its count matches values.
href, xlink:href	Optional target; otherwise the parent element is targeted.
begin, dur, end, fill	Active-interval timing.
repeatCount, repeatDur, restart, min, max	Repeat and active-duration controls.

begin and end accept offset clock values, including the earliest resolvable value in a semicolon-separated list. Event and syncbase timing expressions are preserved but do not yet resolve. The default fill="remove" restores the underlying value; fill="freeze" retains the last sampled value.