JavaScript + SVG 不适用于 Tor 和 IE答案

【问题标题】：JavaScript + SVG Does not work on Tor & IEJavaScript + SVG 不适用于 Tor 和 IE
【发布时间】：2017-10-05 19:14:49
【问题描述】：

我制作了一个简单的 SVG，它使用 Javascript 进行动画处理。它与 Chrome、Firefox、Opera 等完美兼容。但它不适用于 TOR 或 Internet Explorer。

我检查了是否在 Tor 和 Internet Explorer 上启用了 JavaScript，答案是肯定的。为什么在能够运行JS的浏览器上使用JS的简单动画不能正确显示？这是 SVG 特有的吗？

这是我想在这些浏览器（尤其是 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>

【问题讨论】：

检查support for async functions
它不起作用，因为 Firefox 直到 52.0 版本才支持异步功能，并且当前版本的 Tor 浏览器基于 Firefox 45.9 ESR。同样，IE 在 Edge 15 之前根本没有。

标签： javascript internet-explorer svg tor

【解决方案1】：

这是大致等效的“非异步”代码：

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);

【讨论】：