Jump to content

<script> in <svg> , TweenMax.staggerTo, failed in mobile devices

Recommended Posts

Dear All,


Hello. I have encountered a problem regarding to StaggerTo . My case is like this:


1. I have a simple svg file stored in my firebase realtime Database as a node as below (i copied the whole file  as text as paste it as string node):


(I know I should write my case in CodePen but I don't know where I should put my svg as an external file for CodePen to read from. I apologize for that.)

<svg onload="init(evt)" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" id="slider1Svg" >
<script type="application/ecmascript"> <![CDATA[
  function init(evt) {
     TweenMax.staggerTo($('.star'), 2, {scale:3.5, opacity:0, delay:0.5, ease:Elastic.easeOut, force3D:true,  repeat:-1}, 0.2);


<g id="stars" fill-rule="evenodd" clip-rule="evenodd" fill="#FFF">
      <polygon class='star' fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="72.574,123.936 71.155,123.877 70.302,125.014
        69.918,123.646 68.574,123.186 69.757,122.398 69.779,120.978 70.893,121.859 72.25,121.441 71.757,122.773     "/>
      <polygon class='star' fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="163.574,167.936 162.155,167.877 161.302,169.014
        160.918,167.646 159.574,167.186 160.757,166.398 160.779,164.978 161.893,165.859 163.25,165.441 162.757,166.773     "/>
      <polygon class='star' fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="206.574,167.936 205.155,167.877 204.302,169.014
        203.918,167.646 202.574,167.186 203.757,166.398 203.779,164.978 204.893,165.859 206.25,165.441 205.757,166.773     "/>
      <polygon class='star' fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="163.574,247.936 162.155,247.877 161.302,249.014
        160.918,247.646 159.574,247.186 160.757,246.398 160.779,244.978 161.893,245.859 163.25,245.441 162.757,246.773     "/>




You can see I am using "onload" in the opening <svg> tag. 


2. Then in my javascript file, I append the node to the div like this:

firebase.database().ref('svgfile').once("value", function(data){

      var svg = data.val().svg;




3. My Stars Twinkle in the below browsers (all up-to-date versions and cache cleared ):


  • Windows 10 -
    • chrome
    • edge
  • MacOs -
    • safari
    • firefox
  • Android - 
    • chorme
    • opera


unfortunately the stars do not twinkle in the below browsers:

  • ipad pro 
    • chrome
    • safari
    • opera


and I tested on my very old ipad mini with iOS version 9.35, safari, the stars also twinkle.


May I ask if this is the problem caused by the OS? 


My goal is to match a corresponding animation code with the svg file, so I don't need to put all the animation codes into the main.js , like below:


1.svg use "code for 1.svg"

2.svg use "code for 2.svg" etc.


Beside writing the animation codes in the <script> in <svg> , may I ask if there is another way I can achieve this?


Thank you very much for your help.







Share this post

Link to post
Share on other sites

Hi @Alexli,


Welcome to the forums!


Although I do not know for sure, I would suspect it is a case of browser divaness and a reduced case scenario would be the only way to figure it out - or if someone else happens to be doing the same thing as you.


You can get data from a firebase in CodePen. If you would be so kind to try to get a simple pen together it would be great.


Here's a some pens tagged with firebase in CodePen - maybe you can work it out by looking at some examples: https://codepen.io/tag/firebase/

  • Like 4
  • Thanks 1

Share this post

Link to post
Share on other sites

It's a security issue when inserting JavaScript like that. Don't know how jQuery does it, but if it uses innerHTML, it's not supposed to execute.


Or it could be a closing script tag issue.




  • Like 6
  • Thanks 1

Share this post

Link to post
Share on other sites

Dear All,


I really appreciate your quick response. Thank you Blake, Thank you Dipscom.


I have just resolved the problem according to Blake's quoted page.


I have taken the animation codes out from the svg file and saved it in an external js file using below plain script. Now the animation works on all devices I possess.


Thank you again. Wish you Good Health and Good Luck!






var script   = document.createElement("script");
script.type  = "text/javascript";
script.src   = "path/to/your/javascript.js";    // use this for linked script
script.text  = "alert('voila!');"               // use this for inline script
  • Like 3

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.