SVG

Question

我用 snap svg 做了一个代码笔：Codepen

我尝试在无限循环中围绕他自己的中心点旋转 svg-gear。这在 Internet Explorer 上有效，但在 Mozilla-Firefox 和 Google-Chrome 上失败。

Chrome 和 Firefox 中的中心点似乎不对，因此齿轮移出了他的位置。

对于旋转，我使用了以下代码：

function infRotate(el, time, cw) {
        var box = el.getBBox();
        el.transform('r0,' + box.cx + ',' + box.cy);
        if (cw)
            el.animate({transform: 'r360,' + box.cx + ', ' + box.cy}, time, mina.linear, infRotate.bind(null, el, time, cw));
        else
            el.animate({transform: 'r-360,' + box.cx + ', ' + box.cy}, time, mina.linear, infRotate.bind(null, el, time, cw));
    }

我必须为 Firefox 做些什么 Chrome 才能找到正确的中心点？感谢您的帮助。

Answer 1

Joel 除了使用 box.cx 和 box.cy 居中。通过将容器的宽度和高度除以 2 来居中，然后用它设置。

Answer 2

根据@lan 的评论找到解决方案。

齿轮在一个组中，其中包含一个 X/Y - 变换。所以我尝试 删除 svg 文件中的每个组和层 。为了清楚地看到对象的嵌套，我在 Inkscape.

中使用 XML-Editor

必须使用相对变换将每个对象移动到其原始位置。使用相对运动会阻止 inkscape 打印出组的翻译属性。

在 Inkscape 中相对移动对象的步骤：

转到编辑 -> Select 所有图层
转到对象 -> 变换

在变换面板中：

取消选中相对移动并选中分别应用于每个对象
将对象移动到目标位置

清理 svg 文件后，firefox 和 chrome 也计算出正确的值，齿轮现在可以很好地旋转（请参阅 codpen 上更新的代码）

也许存在告诉 Inkscape 不使用转换属性的更好解决方案，但我还没有找到它。

因此，如果您使用动画 SVG，请确保文件没有不必要的组和图层，并注意转换。

SVG - 无限旋转采用错误的中心点

SVG - Endless rotation takes wrong center point

javascript

css

animation

snap.svg