SVG圈在旋转动画中摆动

Question

我尝试过旋转包含SVG圈子的div的非常简单的CSS动画。由于某种原因，圆圈摇摆不定。预期的行为是圆圈显示为静态。为什么会这样？

HTML：

^(?i)(?!.*http:\/\/).*?\.net(?!work|flix).*

的CSS：

<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>

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

Answer 1

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

Answer 2

正如Tom Walpole所说，似乎SVG高度上有一个额外的px。在SVG上添加 display：block 似乎删除了额外的px。