Javascript Google Chrome的SVG问题

我用AngularJS和D3JS制作了一个简单的网站，并创建了一个自定义的圆形网格库（非常粗糙）。在Firefox中一切都很好，但在Chrome中却不行。该网站位于petoknm.github.io。在我的主页中，我有一个圆形网格，显示圆形。但是，当我（直接）转换到另一个带有圆形网格的页面（编程页面）时，它开始表现出不同的行为。当我从编程转到主页时，它开始忽略前两个图像上的clipPath（两个可能是因为编程页面中的两个图像）。svg与首先出现的正确svg完全相同（我只检查了前三个带有图像和前三个Clippath的“a”标记）。。。我不知道会发生什么

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

这是来自编程页面的屏幕截图

正如您所看到的，clipPath仍然在svg中，并且由Chrome“显示”，但没有实际使用（或被忽略）

---

请帮忙，我不知道为什么会发生这种情况，为什么Firefox不会有问题，我会做出一个有根据的猜测，并说这是因为您的编程页面正在重用ID“#clippath0”和“#clippath1”。因为它是一个单页站点，您正在替换DOM中包含这些引用的部分，所以Chrome中可能存在一个bug，它对它们指向的内容感到困惑

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

---

不过，它看起来确实像是Chrome中的一个bug。也许你想报告一下。

分享你的代码，伙计。谢谢。将ID更改为始终唯一会有所帮助。但是我会尝试报告这个错误。