animateMotion | Loop and Break

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

<!DOCTYPE HTML>
<html>
    <head>
        <title>SVG tutorial</title>
    </head>
    <body>
        <svg width="120" height="120">
            <!-- 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>
            </circle>
        </svg>
    </body>
</html>

Categories