为什么此SVG在Chrome上可以正常运行，而在Firefox上却不可见？

Question

我正在使用此SVG创建一个简单的信号电平表：

 <svg id="outdoor-meter" class="svg-flow" svg-flow="current-temp,dx=-5,dy=-3.5">
          <svg viewBox="0 0 640 512" class="signal-meter" width="2" height="1.6">
            <rect x= "24" y="384" width="80" height="128" class="signal-bar-1"/>
            <rect x="152" y="288" width="80" height="224" class="signal-bar-2"/>
            <rect x="280" y="192" width="80" height="320" class="signal-bar-3"/>
            <rect x="408" y= "96" width="80" height="416" class="signal-bar-4"/>
            <rect x="536" y=  "0" width="80" height="512" class="signal-bar-5"/>
            <line style="display: none; stroke-width: 40px; stroke: rgb(255, 0, 0);" class="no-signal" x1="64" y1="40" x2="576" y2="424"/>
          </svg>
        </svg>

在Chrome中，它看起来像这样（下面的绿色和蓝色小条形图）：

在Firefox中，这些信号电平表是完全不可见的，尽管在“ chunk-full-of-SVG”页面的其余部分上没有其他SVG问题。

唯一直接影响渲染的CSS类是signal-bar- x 类（决定哪些条可见），no-signal（显示红色斜线）和以编程方式应用的滤色镜。 svg-flow类没有任何关联的CSS；它用于JavaScript根据需要查找并重新定位图像。

在Firefox中检查信号表的元素时，没有迹象表明CSS使它变得不可见，或者意外地将其放置在屏幕外。奇怪的是，当我将鼠标悬停在最外层的<svg>标签上时，屏幕的巨大部分会突出显示，并且该元素应该超过1300x800像素。在Chrome中执行相同的操作，只突出显示了可见的微小测光表，报告的尺寸合理得多，约为12x11像素。

完整的源代码可以在这里找到：https://github.com/kshetline/aw-clock

这里有一个现场演示：https://weather.shetline.com/

..但是不幸的是，这仅是因为所有其他SVG都可以正常工作，因为该网站没有自己的无线温度/湿度传感器，这就是信号表的用途。

关于如何使SVG在Firefox上运行的任何想法？

Answer 1

哇...这原来是一个简单的更改，但令人惊讶的是它带来了这样的后果。我只需要将width="2" height="1.6"从内部svg标记移到外部svg标记。

<svg id="outdoor-meter" class="svg-flow" svg-flow="current-temp,dx=-5,dy=-3.5" width="2" height="1.6">
  <svg viewBox="0 0 640 512" class="signal-meter">
    ...

在没有设置宽度和高度的情况下，Firefox不仅对图形的大小和位置感到困惑，而且重新定位这些元素的JavaScript代码也因不太有用的通用NS_ERROR_FAILURE而崩溃当它为这些元素调用getBBox()函数时。

我根本就不会有两层SVG标签，但是事实证明，当其他元素改变位置或大小时，调整信号表的位置是一个整体，以及应用滤色镜是必要的。