SVG animation does not run in Safari

[AHoe 1 Likes (Newbie)]

I have created a small test animation here. In Codepen it runs without problems. But when I save the SVG locally it runs perfectly in Chrome, Firefox, even Internet Explorer. But Safari simply does not access the plugin. Can someone give me a hint? Thanks!

See the Pen yzzEgr by AniHoe (@AniHoe) on CodePen

[Dipscom 3,373 Likes (Superhero)]

Hello @AHoe have you included the GSAP library in your HTML?

[AHoe 1 Likes (Newbie)]

Hi @Dipscom
Yes, like this: 

       <script type="text/javascript" href="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>

 

[Dipscom 3,373 Likes (Superhero)]

Ok.

 

I've downloaded your Pen and opened it on a couple of browsers, all worked fine which leaves me to assume you are not doing that. What exactly were the steps you took to end up in the situation you are in?

[Carl 11,324 Likes (Superhero)]

it looks like you're script tag is inside the SVG code.

Try placing it outside the SVG.

 

I suspect Safari has some security restriction preventing you from running it inside the SVG.

Perhaps something here helps: https://stackoverflow.com/questions/1797203/how-to-load-an-external-javascript-script-to-pure-svg-document

[GreenSock 18,876 Likes (Superhero)]

Yep, I bet Carl is right. 

 

Also, I'd strongly recommend using the latest version of GSAP (1.20.3 as of today). The 1.18.4 one is pretty old.

[OSUblake 18,533 Likes (Superhero)]

And if you have code inside your SVG, you should probably wrap it with CDATA markers.

 

<script type="text/javascript">
  //<![CDATA[
  
  // your code goes here
  console.log("Hello");  

  //]]>
</script>

 

[AHoe 1 Likes (Newbie)]

Thanks guys!! 

 

Now it runs perfectly. Tho problem was actually that I had the JavaScript inside the SVG. Also, I have linked with "href" and not with "src" 

[Dipscom 3,373 Likes (Superhero)]

Ah, sorry, I didn't click you wanted to encapsulate the JavaScript into the SVG.

 

(Not that I'd known from the top of my head how to solve it, though...  )