SVG 徽标动画但被 viewBox 剪辑答案

【问题标题】：SVG Logo Animates but gets clipped by viewBoxSVG 徽标动画但被 viewBox 剪辑
【发布时间】：2019-06-06 11:43:46
【问题描述】：

我成功地为 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/

非常感谢任何帮助，因为我肯定会在未来的项目中遇到这个问题！

【问题讨论】：

一个简单的解决方法：svg{overflow: visible;} 或者，您可能需要更改 SVG 的 viewBox 属性
老兄，这太容易了！我正在尝试涉及 viewBox 属性的解决方案，但无法弄清楚。有时我希望房间里有其他开发人员来问这些问题！将此添加为答案，我会投票赞成。

标签： css svg css-transitions css-animations css-transforms

【解决方案1】：

正如我所评论的：解决此问题的一个简单方法是在 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。如果你不需要它，你可以删除它。

【讨论】：

感谢 CSS 溢出答案（对我有用）和其他信息。我真诚地感谢它。干杯！