<svg width="5cm" height="3cm" viewBox="0 0 500 300" version="1.1"> <desc>Example animMotion01 - demonstrate motion animation computations</desc> <rect x="1" y="1" width="498" height="298" fill="none" stroke="blue" stroke-width="2"/> <path id="path1" d="M100,250 C 100,50 400,50 400,250" fill="none" stroke="blue" stroke-width="7.06"/> <circle cx="100" cy="250" r="17.64" fill="blue"/> <circle cx="250" cy="100" r="17.64" fill="blue"/> <circle cx="400" cy="250" r="17.64" fill="blue"/> <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06"> <animateMotion dur="6s" repeatCount="indefinite" rotate="auto"> <mpath xlink:href="#path1"/> </animateMotion> </path> </svg> |
Original SVG source |