SVG圆在旋转动画中摆动答案

【问题标题】：SVG circle wobbles in rotation animationSVG圆在旋转动画中摆动
【发布时间】：2016-05-05 05:03:09
【问题描述】：

我尝试了一个非常简单的 CSS 动画来旋转包含 SVG 圆圈的 div。由于某种原因，圆圈摇晃着。预期的行为是让圆圈看起来是静态的。为什么会这样？

html:

<div id="circle"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
         viewBox="0 0 100 100" xml:space="preserve">
<circle style="fill:#1B1464;" cx="50" cy="50" r="50"/>
</svg></div>

css:

#circle {
  width: 50px;
  animation: rotating 2s linear infinite;
}
@keyframes rotating {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

http://codepen.io/se7en/pen/OMZRbJ

【问题讨论】：

标签： css svg css-animations

【解决方案1】：

如果你检查你的#circle div，你会发现它的高度是 54px 而不是 50px - 所以它会稍微偏离旋转

【讨论】：

【解决方案2】：

正如 Tom Walpole 所提到的，SVG 高度上似乎有一个额外的 px。在 SVG 上添加 display:block 似乎会删除额外的像素。

【讨论】：

谢谢。 display:block 在 firefox 上不起作用，但指定高度可以！