mardi 24 mars 2020

In Css svg Animation, I couldnt Animate Á object to follow a Path

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
<style type="text/css">



    .FollowPath{fill:none;stroke:#000000;stroke-width:4;stroke-miterlimit:10;animation:draw 2s forwards infinite;stroke-dasharray:936}

    .Cap{fill:#000000;stroke:#000000;stroke-width:1;stroke-miterlimit:10; position: absolute;
  overflow: hidden; }
    .Lift{ z-index: 1;animation:move 2s linear  infinite; offset-path:path('M501.92,545.3c290.65-278.3,564.46-216.26,830,13.06')}
    @keyframes draw{
    from{
    stroke-dashoffset:0;
    }
    to{
    stroke-dashoffset:-936;
    }
    }

    @keyframes move{
    from{
     motion-offset: 0%;
    offset-distance:0%;
    }
    to{
    motion-offset: 100%;
    offset-distance:100%;
    }
    }
</style>

<path class="Cap Lift" d="M566,502.5L469.5,596c-4.3,4.1-10.6,5.2-14,2.4l0,0c-3.4-2.8-2.8-8.6,1.5-12.7l96.5-93.5
    c4.3-4.1,10.6-5.2,14-2.4l0,0C570.9,492.6,570.3,498.3,566,502.5z"/>
<path class="FollowPath" d="M501.92,545.3c290.65-278.3,564.46-216.26,830,13.06"/>


</svg>

I wanna ask what is the problem that It is not working as per Expectation,i.e. aeroplane must follow the path. Altough I tried many different approach but the output was unexpected, please Help.




Aucun commentaire:

Enregistrer un commentaire