时间戳

首页 > 解决方案 > SVG 徽标动画但被 viewBox 剪辑

css - SVG 徽标动画但被 viewBox 剪辑

问题描述

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

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

标签： csssvgcss-transitionscss-animationscss-transforms

解决方案

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

但是，如果这不起作用，您可能需要稍微调整一下代码。

  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。如果你不需要它，你可以删除它。

推荐阅读