JavaScript + SVG 不适用于 Tor 和 IE
JavaScript + SVG Does not work on Tor & IE
我制作了一个简单的 SVG,它使用 Javascript 进行动画处理。它与 Chrome、Firefox、Opera 等完美配合。但是它不适用于 TOR 或 Internet Explorer。
我检查了 JavaScript 是否在 Tor 和 Internet Explorer 上启用,答案是肯定的。为什么在能够运行 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>
这大致相当于"non-async"代码:
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);
我制作了一个简单的 SVG,它使用 Javascript 进行动画处理。它与 Chrome、Firefox、Opera 等完美配合。但是它不适用于 TOR 或 Internet Explorer。
我检查了 JavaScript 是否在 Tor 和 Internet Explorer 上启用,答案是肯定的。为什么在能够运行 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>
这大致相当于"non-async"代码:
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);