某些浏览器大小上SVG元素不透明度的一部分小于1

Question

我的html中有一个内联指定的SVG元素。 SVG元素本身具有彼此重叠的多个路径，并且每个路径在它们彼此重叠的方式上具有一定的优先级。这是SVG应该呈现的图片。

徽标的蓝色部分与灰色部分重叠，部分灰色与绿色重叠，部分绿色与黄色重叠。我遇到的问题是，在某些浏览器尺寸上，灰色路径的不透明度看起来小于1，您可以在灰色路径下看到绿色元素。这是一张错误渲染的svg：

的图片

我不明白为什么会发生这种情况，因为我明确地将SVG Path笔划不透明度设置为1，元素的z-index从左到右递减，元素本身的不透明度为1。它们也在内联svg中声明了我希望它们的优先级。这是我的svg的标记：

＆＃13;

＆＃13;

public static void main(String[] args) {
    //some code
    long original = System.currentTimeMillis();
    while (true) {
        if (System.currentTimeMillis - original >= 5000) {
            break;
        }
    }
    //more code after waiting
}

＆＃13;

#blue {
  z-index: 5;
  stroke-opacity: 1;
  opacity: 1;
  animation-name: logo-up;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-play-state: paused;
}

#grey {
  z-index: 4;
  opacity: 1;
  stroke-opacity: 1;
}

#green {
  z-index: 3;
  opacity: 1;
  stroke-opacity: 1;
}

#yellow {
  z-index: 2;
  opacity: 1;
  stroke-opacity: 1;
}

＆＃13;

＆＃13;

＆＃13;

简单地说，为什么不同的浏览器大小会出现不同的不透明行为，如何针对不同的浏览器大小使行为相同？谢谢。

编辑：Google Chrome和Mac OS上出现此问题。浏览器大小1280像素乘595px是有问题的，以及许多不同的其他大小。我不确定宽高比是导致问题还是只是浏览器的大小。该徽标在1197x570处看起来很不错。