我成功地对SVG徽标的部分进行了动画处理，但是旋转时其外部边缘最终出现在viewBox的外部。我已经玩了好几个小时了，但无法弄清楚如何在viewBox的内部添加“ padding”以使动画有完成的空间。
<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/
任何帮助都将不胜感激，因为我肯定也会在以后的项目中遇到任何帮助！
答案 0 :(得分：3)
我已经评论过：解决此问题的一个简单方法是在CSS中添加svg{overflow: visible;}。
但是，如果这不起作用，则可能需要调整一些代码。
transform-origin: 13.2% 46.5%;已更改为transform-origin: 82.5px 74.5px;，因为我希望对其进行硬编码。我将稍微改变svg的大小，这些百分比将不再起作用。我的数字是一个大概的数字。您可能需要确保这就是您所需要的。viewBox更改为-10 -15 625.1 180。在您的代码中，您还拥有enable-background，其值与viewBox相同。如果不需要，可以将其删除。