SVG 在 Firefox 中完全不可见 [英] SVG is fully invisible in Firefox
问题描述
在将其标记为重复之前:我们已经确保正确设置了宽度和高度.我将其表述为不可见，因为尽管它占用了正确的空间，甚至在图像上加载了正确的尺寸，但在网站、网络选项卡和直接查看 SVG 时，图像的内容是空的.基本上，无论我们如何显示或查看，实际的 SVG 都是不可见的.
Before this gets marked as a duplicate: we've already ensured the width and height are properly set. I'm phrasing it as invisible because although it takes up the correct space and is even loaded in with the correct dimensions on the image, the content of the image is empty in the website, network tab, and when viewing the SVG directly. Basically, the actual SVG is showing up invisible regardless of how we display it or view it.
我们想在我们的网站上展示一个 SVG.它适用于 Chrome、Edge 等，但不适用于 Safari 和 Firefox.我们最初认为这是我们如何加载它的问题，但转到 SVG 文件本身(即://xxx/image.svg)显示它完全不可见.此外，它正在以正确的大小加载，只是没有实际内容.
We have an SVG we'd like to show on our site. It works perfectly in Chrome, Edge etc but not in Safari and Firefox. We originally thought it was an issue with how we were loading it, but going to the SVG file itself (i.e. ://xxx/image.svg) shows it as perfectly invisible. Moreover, it's being loaded in with the correct size and all, just with no actual content.
我们使用的其他 SVG 都可以工作，即使它们都来自相同的画板，并以相同的方式从 Illustrator 导出.因为它是从 Illustrator 导出的，所以我什至很难阅读它，更不用说调试它的错误了；我不想直接更改 SVG，以防将来需要修改.
The other SVGs we're using all work, even though they're all from the same artboards, and exported the same way from Illustrator. Since it's exported from Illustrator it's hard for me to even read it let alone debug it for errors; I'd prefer not to change the SVG directly in case it needs to be modified in the future.
我想知道是否有任何已知问题可能导致 SVG 即使在单独查看时也不可见.
I'm wondering if there are any known issues that could cause an SVG to be invisible even when viewing it by itself.
推荐答案
filter0_b 中的 feGaussianBlur 基元有一个 BackgroundImage 输入.我认为这应该是 BackgroundImageFix - 这是在之前的原语中定义的.
There is a BackgroundImage input to the feGaussianBlur primitive in the filter0_b. I think this supposed to be BackgroundImageFix - which is defined in the previous primitive.
BackgroundImage 是一种特殊的输入，任何主流浏览器都不支持.当 Firefox 遇到这样的无效输入时，它不会显示过滤后的图像.Chrome 通常会忽略错误并继续.
BackgroundImage is a special input which is not supported in any major browser. When Firefox encounters an invalid input like this, it won't display the filtered image. Chrome will usually ignore errors and carry on.
Safari 可能是一个不同的问题 - 过滤器只能在定义后才能被引用(这是一个错误) - 所以如果您将 defs 部分直接移动到 SVG 下方，它应该可以在 Safari 中工作.
Safari is probably a different problem - filters can only be referenced after they've been defined (it's a bug) - so if you move that defs section directly beneath the SVG, it should work in Safari.
这篇关于SVG 在 Firefox 中完全不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
