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

Question

我是第一次使用动画SVG / Snap.svg，所以请原谅我对这个主题缺乏了解。

我制作了一系列3幅动画SVG＆＃34;帧＆＃34; （400x300px），每个嵌套在一个较大的SVG（1200x300px）中以包含它们。具有div样式属性的clip元素会隐藏其他两个＆＃34;帧＆＃34;当他们还没准备好出现时。

使用Snap.svg，每个帧应该＆＃34; slide＆＃34;在一段时间后使用translate进入视图，并且在每个帧内都有一些动画元素。

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

此外，两个元素（牛圈joules和图圈graph）在左上角渲染，而不是使用他们的translate属性来定位它们在中右区。

你可以在Plunker中看到动画。请在两个浏览器中试用，看看我的意思。

http://plnkr.co/UhTy83

Firefox GIF截屏：

Chrome GIF截屏：

Answer 1

感谢Ian对我的问题的评论！替换<svg>（组）标记的<g>标记可解决此问题。有趣的是，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>