360度旋转SVG元素没有任何作用

Rotating an SVG element 360 degrees does nothing

本文关键字：任何 作用 元素 旋转 SVG 360度      更新时间：2023-09-26

我使用d3.js。我试图旋转一个SVG元素360度，这样它旋转一次，并返回到它的原始位置。

像这样旋转3/4就可以了:

    thing
        .transition()
        .attr('transform', 'rotate(270,640,426)')
        .duration(6000);

但是尝试使完整的旋转动画没有任何作用:

    thing
        .transition()
        .attr('transform', 'rotate(360,640,426)')
        .duration(6000);

我认为d3(或者这可能是一个更普遍的事实关于svg转换属性)看到结束是一样的开始，只是采取快捷方式什么都不做。同样，如果我移动365度，它只移动5度。

。为什么会这样?B.正确的做法是什么?

D3规范化SVG转换;这就是你所看到的结果的原因。你可以使用自定义的补间函数:

function rotTween() {
  var i = d3.interpolate(0, 360);
  return function(t) {
    return "rotate(" + i(t) + ")";
  };
}
相关文章：