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

【问题标题】：Rotating an SVG element 360 degrees does nothing将 SVG 元素旋转 360 度没有任何作用
【发布时间】：2014-03-21 20:22:42
【问题描述】：

我正在使用 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 度。

A.为什么是这样？ B. 正确的做法是什么？

【问题讨论】：

【解决方案1】：

D3 标准化 SVG 变换；这是您看到的效果的原因。但是，您可以使用自定义补间函数来做到这一点：

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

完整示例here。

【讨论】：