Graphery SVG

# animateMotion

The SVG animateMotion element let define how an element moves along a motion path.

Usually, this element is created with:

const animateMotion = parentElement.add('animateMotion')

It's possible to create it as a disconnected element with gySVG('animateMotion') and attach it to the SVG document with .attachTo().

More info: mdn (opens new window) | w3c (opens new window)

# .keyPoints()

animateMotion.keyPoints( value )

Set the keyPoints attribute indicate, in the range [0,1], how far is the object along the path for each keyTimes associated values.

  • argument: {number} value A value between 0 and 1

  • returns: {gySVGObject} The original object

const keyPoints = element.keyPoints();

Get the keyPoints current value.

  • returns: {number} A value between 0 and 1

# .path()

animateMotion.path( path )

Set this attribute defines the path of the motion, using the same syntax as the d attribute.

  • argument: {string} path Motion path as a d attribute

  • returns: {gySVGObject} The original object

const d = element.path();

Get the path current value.

  • returns: {string} Current path

# .rotate()

animateMotion.rotate( rotation )

Set the rotation applied to the animated element along a path, usually to make it pointing in the direction of the animation.

  • argument: {number|string} rotation Must be a number or 'auto' | 'auto-reverse'

  • returns: {gySVGObject} The original object

const rotate = element.rotate();

Get the rotate current value.

← animateTransform →