svg路徑動畫心得

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>
        
        <!--運動的相關參數  一、href連接到圖片   mpath連接到路徑-->
        <animateMotion xlink:href="#car" dur="3s" begin="0s" fill="freeze" repeatCount="indefinite">
            <mpath xlink:href="#motionPath" />
        </animateMotion>
    </svg>