Javascript Snap.svg-Chrome/Firefox之间的svg呈现不一致

我第一次使用动画svg/Snap.svg，因此请原谅我在这方面缺乏知识

我制作了一系列3个动画SVG“帧”（400x300px），每个帧嵌套在一个更大的SVG（1200x300px）中以包含它们。带有

clip

style属性的

div

元素在其他两个“帧”未准备好显示时隐藏它们

使用Snap.svg，每一帧都应该在一段时间后使用

translate

“滑动”到视图中，并且在每一帧中都有一些动画元素

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

此外，其中两个元素（cow圆

焦耳

和graph圆

graph

）渲染在左上角，而不是使用其

translate

属性将其定位在右中区域

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

Firefox GIF屏幕截图：

Chrome GIF屏幕截图：

---

感谢伊恩对我的问题的评论！将

标记替换为

（组）标记修复了此问题。我感兴趣的是，Firefox允许您转换

元素，但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>

我会将其分解为更小的代码，并使用更少的示例。第一个猜测是您正在对svg元素应用转换。svg标签上的转换实际上不受支持，因此将svg元素附加到一个组中，然后转换该组。谢谢@Ian！将

标记替换为

（组）标记修复了此问题。我感兴趣的是，Firefox允许您转换

元素，但Webkit不允许。SVG元素转换是即将发布的SVG 2规范草案中的一项新功能（SVG 1.1中不允许）。Chrome和Firefox已经实现了SVG 2的某些部分，这是Firefox已经实现的一部分，Chrome还没有实现。还有一些其他的部分在这两个版本中都实现了，还有一些只是在Chrome中实现的。