svg路径动画心得

Posted 2020-06-26 看我的~

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>