by 3 contributors:

The animateMotion element causes a referenced element to move along a motion path.

Usage context

Categories Animation element
Permitted content Any number of the following elements, in any order:
Descriptive elements »

And at most one <mpath> element
Normative document SVG 1.1 (2nd Edition)


Source code Output result
<?xml version="1.0"?>
<svg width="120" height="120"  viewBox="0 0 120 120"
     xmlns="" version="1.1"
     xmlns:xlink="" >

    <!-- Draw the outline of the motion path in grey, along
         with 2 small circles at key points -->
    <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
          stroke="lightgrey" stroke-width="2" 
          fill="none" id="theMotionPath"/>
    <circle cx="10" cy="110" r="3" fill="lightgrey"  />
    <circle cx="110" cy="10" r="3" fill="lightgrey"  />

    <!-- Here is a red circle which will be moved along the motion path. -->
    <circle cx="" cy="" r="5" fill="red">

        <!-- Define the motion path animation -->
        <animateMotion dur="6s" repeatCount="indefinite">
           <mpath xlink:href="#theMotionPath"/>

» animateMotion.svg


Global attributes

Specific attributes

DOM Interface

This element implements the SVGAnimateMotionElement interface.

Document Tags and Contributors

Contributors to this page: kscarfone, Jeremie, trevorh
Last updated by: kscarfone,