仅在Safari上，为什么SVG feColorMatrix过滤器会导致剪切？

Question

我正在使用SVG图形显示两个信号电平表。仪表的条形为绿色，但是由于在给定的时间仅显示来自一个信号源的信号，因此我使用过滤器将仪表上的未使用信号设为蓝色。在Chrome或Firefox上，仪表的外观如下：

这是Safari上发生的情况（请注意，右侧的蓝色仪表在左右两侧都被剪掉了）：

如果我使用Safari的Web控制台检查元素，然后取消选中过滤器，则剪辑不会消失，而无需进行其他任何更改（当然，仪表也会再次变绿）。我完全可以确定是造成削波的过滤器，而不是其他问题，例如定位不正确或不透明组件重叠。

这是定义过滤器的方式

        <filter id="meter-tint">
          <feColorMatrix type="matrix" values="1 0 0 0 0 0 0.5 0 0 0 0 1 1 0 0 0 0 0 1 0"></feColorMatrix>
        </filter>

这是要对其应用过滤器的SVG：

        <svg id="outdoor-meter-2" class="svg-flow" svg-flow="current-temp,dx=-3.8,dy=-3.5" width="2" height="1.6">
          <svg viewBox="0 0 640 512" class="signal-meter">
            <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>

更新：

仅仅强调这是多么奇怪和不一致，我发现添加了一个像这样的不可见矩形：

<rect x="0" y="0" width="640" height="512" style="fill: rgba(0, 0, 0, 0)"></rect>

...修复除最左边的条以外的所有剪辑，并且此操作：

<rect x="0" y="0" width="640" height="640" style="fill: rgba(0, 0, 0, 0)"></rect>

...固定所有左右剪切，但将图形向上移动几个像素。 height="639"不足以修复左侧的任何剪辑，然后将其增大到640即可解决所有问题。

这没有道理！