SVG 在 Firefox 中完全不可见

Question

在这被标记为重复之前：我们已经确保正确设置了宽度和高度。我将其表述为不可见，因为尽管它占用了正确的空间，甚至在图像上以正确的尺寸加载，但在网站、网络选项卡和直接查看 SVG 时，图像的内容是空的。基本上，无论我们如何显示或查看它，实际的 SVG 都是不可见的。

---

我们想在我们的网站上展示一个 SVG。它在 Chrome、Edge 等中完美运行，但在 Safari 和 Firefox 中不适用。我们最初认为这是我们如何加载它的问题，但转到 SVG 文件本身（即：//xxx/image.svg）显示它完全不可见。此外，它以正确的大小和所有内容加载，只是没有实际内容。

我们使用的其他 SVG 都可以正常工作，即使它们都来自相同的画板，并以相同的方式从 Illustrator 导出。因为它是从 Illustrator 导出的，所以我什至很难阅读它，更不用说调试它的错误了；我不希望直接更改 SVG，以防将来需要修改。

我想知道是否有任何已知问题可能导致 SVG 即使在单独查看时也不可见。

SVG in question

Answer 1

filter0_b 中有feGaussianBlur 原语的BackgroundImage 输入。我认为这应该是 BackgroundImageFix - 这是在前面的原语中定义的。

BackgroundImage 是一种特殊的输入，任何主流浏览器都不支持。当 Firefox 遇到这样的无效输入时，它不会显示过滤后的图像。 Chrome 通常会忽略错误并继续执行。

Safari 可能是一个不同的问题 - 过滤器只能在定义后被引用（这是一个错误） - 所以如果你将 defs 部分直接移动到 SVG 下方，它应该可以在 Safari 中工作。