javascript - 为什么这个 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 中，这些信号电平表是完全不可见的，尽管在 chock-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 标签，但事实证明，当其他元素改变位置或大小时，这对于调整信号表的整体位置以及应用滤色镜是必要的。