SVG - 无限旋转需要错误的中心点

Question

我用snap svg创建了一个codepen：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

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

齿轮组成一组，其中包含X / Y转换。 所以我尝试删除svg文件中的每个组和图层。要清楚地看到对象的嵌套，我使用 Inkscape 中的 XML-Editor 。

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

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

1. 转到修改 - ＆gt;选择所有图层中的全部
2. 转到对象 - ＆gt;变换

在“变换”面板中

1. 取消选中相对移动并选中单独应用于每个对象

2. 将对象移动到目标位置

清理svg文件后，firefox和chrome也会计算正确的值，并且齿轮现在旋转良好（请参阅codpen上的更新代码）



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

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

Answer 2

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