Search code examples
javascriptinternet-explorersvgtor

JavaScript + SVG Does not work on Tor & IE


I've made a simple SVG, which is animated with Javascript. It works perfectly with Chrome, Firefox, Opera etc. However it does not work with TOR nor Internet Explorer.

I've checked if JavaScript was enable on Tor and Internet Explorer, and the answer is yes. How comes that a simple animation using JS on a browser that is able to run JS can't be displayed correctly ? Is this specific to SVG ?

Here is a simplified example of what I want to run on these browsers (especially on Tor tbh) :`

<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="720" height="720" viewBox="0 0 720 720">
<g transform="translate(360,360)">
<line id="hand" transform="rotate(0)" stroke-width="4" y1="0" y2="0" stroke-linecap="round" stroke="black"/>
</g>
</svg>

<script>
function sleep(ms) 
{
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function run()
{
    var x = 0;
    while (x < 360)
        {
        await sleep(10);
        h.setAttribute("y2",x.toString());
        h.setAttribute("transform","rotate( " + x.toString() + " )");
        x = x + 1;
        }
}

var h = document.getElementById("hand");
run();
</script>

Solution

  • This is roughly equivalent "non-async" code:

    var x = 0;
    function run() {
      if (x < 360) {
        h.setAttribute("y2",x.toString());
        h.setAttribute("transform","rotate( " + x.toString() + " )");
        x++;
        window.setTimeout(run, 10);
      } 
    }
    
    var h = document.getElementById("hand");
    window.setTimeout(run, 10);