javascript - 使用 JavaScript(不是 CSS)旋转 svg 行

Question

我有以下 svg 行:

<svg height="100%" width="100%">
    <line id="skyline" x1="50%" y1="50%" x2="50%" y2="90%" style="stroke:rgb(0,0,0);stroke-width:10" />
</svg>

尝试多次旋转线条似乎会向变换属性添加许多 rotate(X)，而不是每次都简单地覆盖该值:

var skyline = document.getElementById("skyline");

for (i = 0; i < 100; i++) {
    var rotation = skyline.getAttribute("transform") + i;
    skyline.setAttribute("transform", "rotate(" + rotation + ")");
}

如何正确获取旋转属性，以及如何正确多次覆盖？

Answer 1

在同步循环中更改相同的属性没有意义。如果你想要某种动画，你需要引入时间延迟。最直接的方法是使用 setTimeout

var skyline = document.getElementById("skyline");

var angle = getOriginalAngle(),
    finalAngle = angle + 100;

function rotate() {
   skyline.setAttribute("transform", "rotate(" + (angle++) + "deg)");
   (angle < finalAngle) && setTimeout(rotate, 12); // repeat every 12 ms
}

rotate(); // launch animation

UPD 或者，如果您希望您的更改与浏览器渲染循环同步，您可以使用 requestAnimationFrame

function rotate() {
   skyline.setAttribute("transform", "rotate(" + (angle++) + "deg)");
   (angle < finalAngle) && requestAnimationFrame(rotate); // +- 60 fps
}