Google Chrome的SVG问题

Question

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

这是首次加载页面后的屏幕截图

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中的一个错误。 也许您可能想报告它。