html - SVG 在 Firefox 中完全不可见
问题描述
在这被标记为重复之前：我们已经确保正确设置了宽度和高度。我将其表述为不可见，因为尽管它占用了正确的空间，甚至在图像上加载了正确的尺寸，但在网站、网络选项卡和直接查看 SVG 时，图像的内容是空的。基本上，无论我们如何显示或查看它，实际的 SVG 都是不可见的。
我们有一个 SVG 想要在我们的网站上展示。它在 Chrome、Edge 等中完美运行，但在 Safari 和 Firefox 中不适用。我们最初认为这是我们如何加载它的问题，但转到 SVG 文件本身（即：//xxx/image.svg）显示它完全不可见。此外，它以正确的大小和所有内容加载，只是没有实际内容。
我们使用的其他 SVG 都可以正常工作，即使它们都来自相同的画板，并且以相同的方式从 Illustrator 导出。由于它是从 Illustrator 中导出的，我什至很难阅读它，更不用说调试它的错误了；我不希望直接更改 SVG，以防将来需要对其进行修改。
我想知道是否有任何已知问题可能导致 SVG 即使在单独查看时也不可见。
解决方案
filter0_b 中的原语有一个BackgroundImage输入。feGaussianBlur我认为这应该是BackgroundImageFix- 这是在前面的原语中定义的。
BackgroundImage 是一个特殊的输入，任何主流浏览器都不支持。当 Firefox 遇到这样的无效输入时，它不会显示过滤后的图像。Chrome 通常会忽略错误并继续执行。
Safari 可能是一个不同的问题 - 过滤器只能在定义后才能引用（这是一个错误） - 所以如果你将 defs 部分直接移动到 SVG 下方，它应该可以在 Safari 中工作。