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

【问题标题】：Snap.svg - Inconsistent SVG Rendering between Chrome / FirefoxSnap.svg - Chrome / Firefox 之间的 SVG 渲染不一致
【发布时间】：2015-10-30 03:42:24
【问题描述】：

我是第一次使用动画 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 屏幕截图：

【问题讨论】：

我会用更少的例子把它分解成更小的代码。第一个猜测是您正在对 svg 元素应用转换。对 svg 标签的转换并不是真正支持的，所以将 svg 元素附加到一个组中，然后转换组。
谢谢@Ian！将<svg> 标签换成<g>（组）标签解决了这个问题。有趣的是，Firefox 允许您转换 <svg> 元素，但 Webkit 不允许。

标签： javascript html css svg snap.svg

【解决方案1】：

感谢 cmets 中的 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>

【讨论】：

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