JavaScript + SVG不适用于Tor和IE

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript + SVG不适用于Tor和IE相关的知识,希望对你有一定的参考价值。

我做了一个简单的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>
答案

这大致等同于“非异步”代码:

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

以上是关于JavaScript + SVG不适用于Tor和IE的主要内容,如果未能解决你的问题,请参考以下文章

为啥 background-size:100% 100%;不适用于此 SVG?

颤振导入'package:flutter_svg/flutter_svg.dart';不适用于 VS 代码和 Android 工作室

适用于 codepen 但不适用于 Wordpress

SVG 动画不适用于 IE11

SVG 动画不适用于 IE11

Bootstrap 弹出框触发焦点不适用于 SVG <g> 标签