<svg width="500" height="350" viewBox="0 0 500 350"> <!--运动的路径轨迹--> <path style="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"/> <!--运动的图片--> <image id="car" transform="translate(-72,-72)" style="overflow:visible;" width="144px" height="144px" xlink:href="images/light.png"> <animate attributeName="opacity" values="0;1;1;1;1;0" dur="3s" repeatCount="indefinite" /> </image> <!--运动的相关参数 1、href链接到图片 mpath链接到路径--> <animateMotion xlink:href="#car" dur="3s" begin="0s" fill="freeze" repeatCount="indefinite"> <mpath xlink:href="#motionPath" /> </animateMotion> </svg><svg width="500" height="350" viewBox="0 0 500 350"> <!--运动的路径轨迹--> <path style="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"/> <!--运动的图片--> <image id="car" transform="translate(-72,-72)" style="overflow:visible;" width="144px" height="144px" xlink:href="images/light.png"> <animate attributeName="opacity" values="0;1;1;1;1;0" dur="3s" repeatCount="indefinite" /> </image> <!--运动的相关参数 1、href链接到图片 mpath链接到路径--> <animateMotion xlink:href="#car" dur="3s" begin="0s" fill="freeze" repeatCount="indefinite"> <mpath xlink:href="#motionPath" /> </animateMotion> </svg>
