SVG animation, along with the route movement, the project needs to use, the contact feeling is very advanced, but will not-not to be able to! So on the Internet to find relevant information, the first reference and then modify into their own.
<svgwidth= "$"Height= " the"ViewBox= "0 0"> <!--path trajectory of motion - <Pathstyle= "Fill:none;"Stroke= "#000"ID= "Motionpath"D= "m0.038,0c0,0-2.25,26.75,27.75,42.25c11.501,5.942,36.167,25.667,42.5,29.583 c5.465, 3.38,37.333,22.667-11.125,55.917 "/> <!--pictures of the movement - <ImageID= "Car"Transform= "Translate ( -72,-72)"style= "overflow:visible;"width= "144px"Height= "144px"Xlink:href= "Images/light.png"> <AnimateAttributeName= "opacity"Values= "0;1;1;1;1;0"dur= "3s"RepeatCount= "Indefinite" /> </Image> <!--related parameters of Motion 1, href link to picture mpath link to path - <animatemotionXlink:href= "#car"dur= "3s"begin= "0s"Fill= "Freeze"RepeatCount= "Indefinite"> <MPathXlink:href= "#motionPath" /> </animatemotion> </svg>
SVG Path Animation experience