我成功地对 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/
非常感谢任何帮助，因为我肯定会在未来的项目中遇到这种情况！
正如我所评论的：解决这个问题的一个简单方法是在 CSS 中添加svg{overflow: visible;}。
但是，如果这不起作用，您可能需要稍微调整一下代码。
- 在您的 CSS 中，您
transform-origin: 13.2% 46.5%;我已将其更改为transform-origin: 82.5px 74.5px;，因为我希望对其进行硬编码。我将稍微更改 svg 的大小，这些百分比将不再起作用。 我的数字是一个粗略的近似值。您可能希望确保这是您所需要的。 - 我已将
viewBox更改为-10 -15 625.1 180.在您的代码中，您还具有与viewBox具有相同值的enable-background。如果您不需要它，您可以删除它。