SVG - 无限旋转取错中心点

Question

我用Snap SVG创建了一个Codepen: Codepen 我试图让SVG齿轮在自己的中心点上无限循环旋转。 这在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中找到正确的中心点，我该怎么做？谢谢您的帮助。

- JoGe

---

不要依赖于红色矩形，我不确定它来自哪里。那是单独设置的。路径在一个旋转/缩放/平移的组内，而矩形不在组内。如果您查看组和路径的bbox，您会发现它们也不同。我不确定这是否是一个问题，只是提到可能需要检查一下。 - Ian

我想要旋转齿轮，但保持在某个位置上。 我只是为了更好地展示，绘制了红色矩形，以便齿轮改变其X/Y位置（而我不希望如此）。如果您将SVG代码保存到本地并使用inkscape或illustrator打开，则会看到矩形和齿轮都居中于页面而未分组。 - JoGe

好的，现在看起来工作正常了，我想你已经从组中删除了转换？ - Ian

是的，我找到了解决方案。我会在几分钟内发布答案。 - JoGe

Answer 1

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

齿轮在一个包含X/Y转换的组中。因此，我尝试在SVG文件中删除每个组和图层。为了清晰地查看对象的嵌套关系，我使用Inkscape中的XML编辑器进行操作。

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

Inkscape中移动对象的步骤：

1. 转到编辑 -> 选择所有层中的所有内容
2. 转到对象 -> 转换

在“转换”面板中：

3. 取消选中“相对移动”，选中“分别应用于每个对象”

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

清理SVG文件后，Firefox和Chrome也会计算正确的值，齿轮现在旋转得很好（请参见codpen上的更新代码）

也许有更好的解决方案可以告诉Inkscape不使用变换属性，但我还没有找到。

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

- JoGe

Answer 2

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

- Abid Mahmood

---

为什么会有所不同呢？ - Robert Longson

哦，使用宽度和高度的一半得到了相同的结果。如果我打印出这些值，我得到（在Firefox中）box.width/2=77.12982648229425 box.height/2=79.57228499999968 box.cx=111.59683051770574 box.cy=945.9807149999995。为什么即使齿轮是正方形（宽度=高度），我也有不同的值呢？ - JoGe

如果x和y都不为零，您可能会得到错误的结果。正确的方法是：cx = box.width/2+box.x; 和 cy = box.height/2+box.y。 - Erik Dahlström

感谢Erik的提示..那绝对是正确的，但对我的问题没有任何进展。事实是：box.cx = box.width/2+box.x 我该怎么做才能在Firefox和Chrome中获得正确的值？ - JoGe