Chrome / Firefox之间不一致的SVG渲染
我正在第一次使用动画SVG / Snap.svg，所以请原谅我对这个主题的不了解。
我制作了一系列3个动画SVG“帧”（400x300px），每个嵌套在一个更大的SVG（1200x300px）中以包含它们。 当clip样式属性的div元素没有准备好显示时，会隐藏另外两个“帧”。
使用Snap.svg，每个框架应该在一段时间后使用translate “滑动”到视图中，并且在每个框架内都有一些动画元素。
长话短说：动画在Firefox中看起来很完美，但在Chrome / Webkit中看起来很糟糕。 在Chrome中，它看起来每个框架都是堆叠在彼此的顶部而不是并排。
另外，两个元素（牛圆圈joules和图圆graph ）在左上角渲染，而不是使用它们的translate属性将它们放置在中右区域。
你可以在Plunker中看到动画。 请在两个浏览器中试试看看我的意思。
http://plnkr.co/UhTy83
Firefox GIF屏幕截图：
Chrome GIF屏幕截图：
感谢伊恩在评论我的问题！ 换掉<g> （group）标签的<svg>标签解决了这个问题。 我很感兴趣的是，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>