javascript - Snap.svg - Chrome/Firefox 之间的 SVG 渲染不一致

Question

我是第一次使用动画 SVG/Snap.svg，所以请原谅我在这方面的知识不足。

我制作了一系列 3 个动画 SVG“帧”(400x300 像素)，每个都嵌套在一个更大的 SVG(1200x300 像素)中以包含它们。具有 clip 样式属性的 div 元素会在其他两个“框架”未准备好显示时隐藏它们。

使用 Snap.svg，每个帧都应该在一定时间后使用 translate“滑入” View ，并且每个帧内都有一些动画元素。

长话短说:动画在 Firefox 中看起来很完美，但在 Chrome/Webkit 中看起来很糟糕。在 Chrome 中，每个框架看起来只是堆叠在一起，而不是并排放置。

此外，两个元素(奶牛圈 joules 和图形圈 graph)在左上角呈现，而不是使用它们的 translate 属性将它们定位在右中区域。

您可以在 Plunker 中看到动画。请在两种浏览器中尝试一下，看看我的意思。

http://plnkr.co/UhTy83

Firefox GIF 屏幕截图:

Chrome GIF 屏幕截图:

Answer 1

感谢伊恩对我的问题的评论!换出 <svg> <g> 的标签(group) 标签解决了这个问题。 Firefox 允许您转换 <svg> 对我来说很有趣元素，但 Webkit 没有。

之前:

<svg class="slides" width="1200" height="300">
    <svg class="slide1" width="400" height="300"></svg>
    <svg class="slide2" width="400" height="300"></svg>
    <svg class="slide3" width="400" height="300"></svg>
</svg>

之后:

<svg class="slides" width="1200" height="300">
    <g class="slide1"></g>
    <g class="slide2"></g>
    <g class="slide3"></g>
</svg>