-2

I am creating an animation with SVG images and JS, but I've realised that the SVG animations doesn't work in IE... Do you know if there's a way to make it work in IE? If not, is it possible to do it with JS?

You can see the working code here

<div id="drone-parent">
    <svg width="300" height="200" viewBox="0 0 500 350">
      <path id="motionPath" fill="none" stroke-miterlimit="10" d="M72.7,14.1c16.7,6.1,27.7,26.6,45.5,26.1,13.9-.4,23.4-13.7,35.5-20.6s27.6-7.3,42-6.9c3.8,0.1,8,.4,10.9,2.9,4.5,3.9,3.7,11.1,6,16.6,3.9,9.4,16.3,12.4,26.2,10.2s18.6-8.1,28.2-11.7c34.1-12.7,76.6,12.1,82.5,48,1.5,9,.7,18.8-4.3,26.4-15.7,23.4-54.7,8.9-78.4,24.2-7.1,4.6-12.3,11.7-19.1,16.9-20.4,15.7-49.2,10.9-74.3,5.4-7.9-1.7-16.6-4-21.2-10.7-2.2-3.3-3.3-7.5-6.2-10.2s-5.9-3.3-9.2-3.9c-16.8-2.9-33.8,1.7-50.3,5.9s-33.9,8-50.3,3.5S5.2,116,7.9,99.2,23.5,81.9,31.3,70.9s3.4-10.5,3.2-21.8C34,27.9,46.3,4.5,72.7,14.1Z" />

      <image id="drone" x="0" y="0" width="130" height="70" xlink:href="https://d30y9cdsu7xlg0.cloudfront.net/png/375033-200.png"></image>

      <animateMotion 
            xlink:href="#drone"
            dur="10s"
            begin="0s"
            fill="freeze"
            repeatCount="indefinite">
        <mpath xlink:href="#motionPath" />
      </animateMotion>
    </svg>

</div>
J Doe
  • 5
  • 6

1 Answers1

0

I found the solution if anyone is interested. 

TweenMax.to(['.drone'], 10, {bezier:[
      {x:"0px",y:"0px"},
      {x:"50px",y:"25px"},
      {x:"25px",y:"50px"},
      {x:"100px",y:"100px"},
      {x:"0px",y:"0px"},
    ],repeat:-1,ease:Linear.easeNone});

Find it here

J Doe
  • 5
  • 6