SVG动画，但被viewBox剪短

Question

我成功地动画了一个SVG标志的部分，但外部边缘结束在viewBox以外的旋转。我已经玩了几个小时了，但不知道如何在viewBox的内部添加“填充”，以给动画空间来完成。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="5px" y="5px" viewBox="0 0 625.1 160" style="enable-background:new 0 0 625.1 160;" xml:space="preserve" class="ccc-gear position-2">
    <g class="gear-group">

这里有一个小提琴来演示正在发生的事情：https://jsfiddle.net/inhouse/Labrz1vg/13/

任何帮助都是非常感谢的，因为我肯定会遇到这与未来的项目以及！

Answer 1

正如我所评论的:解决这个问题的一个简单方法是在CSS中添加svg{overflow: visible;}。

但是，如果这不起作用，您可能想稍微修改一下代码。

1. 在您的CSS中，您有transform-origin: 13.2% 46.5%;，我已经将其更改为transform-origin: 82.5px 74.5px;，因为我希望对其进行硬编码。我将稍微改变svg的大小，而这些百分比将不再起作用。我的数字只是粗略的近似。你可能想确定这就是你所需要的。
2. 我把viewBox改成了-10 -15 625.1 180。在您的代码中，您还拥有与enable-background相同的值的viewBox。如果你不需要它，你可以删除它。