SVG 徽标动画但被 viewBox 剪裁
SVG Logo Animates but gets clipped by viewBox
我成功地对 SVG 徽标的部分进行了动画处理，但在旋转时外边缘最终位于 viewBox 之外。我已经玩了好几个小时了，但无法弄清楚如何从根本上将 "padding" 添加到 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">
这里有一个 fiddle 来演示到底发生了什么：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。如果你不需要它，你可以删除它。
我成功地对 SVG 徽标的部分进行了动画处理，但在旋转时外边缘最终位于 viewBox 之外。我已经玩了好几个小时了，但无法弄清楚如何从根本上将 "padding" 添加到 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">
这里有一个 fiddle 来演示到底发生了什么：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。如果你不需要它，你可以删除它。