3 个 SVG 在同一页面上

Question

我正在尝试在我们未来网站的主页上显示 3 个动画 svg。 当单独为每个 svg 设置动画时（每个都在一个页面上）它工作正常。

但是，当在同一页面上为它们设置动画时，它们无法正确呈现，因为第二个 svg 显示了第一个的一些元素，而第三个则从第二个中获取元素。

我猜是因为面具的名字不同，但我试过重命名，问题仍然存在。

我的解决方案已经用完了。那里有 SVG 专家可以提供帮助吗？那会非常酷。谢谢！

这是一个包含 3 个 svg 的测试页面。 https://dl.dropboxusercontent.com/u/1699508/index.html

每个 SVG 有 3 个状态：

1. 状态 1 是第 1 页上的“S0”
2. 状态 2 是第 1 页上的“S0 SAnimStart”
3. 状态 3 是第 2 页上的“S1 可见”

谢谢大家:)

Answer 1

所有 SVG 都是 HTML-DOM 和所有关键帧定义的一部分。所以 ids 有多种用途，例如id="page-1"。使用唯一的 id 或将动画绑定到图层的 css 类。