Google Chrome 的 SVG 问题

Question

我一直在用 AngularJS 和 D3JS 制作一个简单的网站，并创建了一个自定义的圆形网格库（非常粗糙）。在 Firefox 中一切正常，但在 Chrome 中却不行。该网站位于 petoknm.github.io 。在我的主页上，我有一个显示圆圈的圆形网格物体。但是当我使用这个圆形网格（编程页面）（直接）转换到另一个页面时，它开始表现不同。当我从编程回到家时，它开始忽略前两个图像上的 clipPath（两个可能是因为编程页面中的两个图像）。 svg 与最初存在的正确 svg 相同（我只检查了前三个 'a' 标签与图像和前三个clipPaths）......我不知道会发生什么。

这是第一次加载页面后的截图

http://i.stack.imgur.com/2fAI6.png

这是来自编程页面后的截图

http://i.stack.imgur.com/JLO3r.png

如您所见，clipPath 仍在 svg 中并由 Chrome “显示”，但并未实际使用（或被忽略）。

请帮忙，我不知道为什么会这样，为什么 Firefox 没问题

Answer 1

我会做出一个有根据的猜测，并说这是因为您的编程页面正在重用 ID“#clippath0”和“#clippath1”。因为它是一个单页站点，并且您正在替换包含这些引用的 DOM 部分，所以 Chrome 中可能存在一个错误，它会混淆它们指向的内容。

尝试为每个页面使用不同的 id 集，看看是否可以解决问题。也许您可以为每个页面添加不同的前缀（例如“#homeclippath0”和“#programmingclippath0”）。

不过，这似乎是 Chrome 中的一个错误。也许您可能想举报。