Your Search Results


    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: trevorh, Jeremie, kscarfone
    Last updated by: kscarfone,