将SVG元素旋转360度无效

Question

我正在使用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.做正确的方法是什么？

Answer 1

D3标准化SVG变换;这是你所看到的效果的原因。但是，您可以使用自定义补间功能执行此操作：

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

完整示例here。