SVGs are inconsistent in their color behavior, when a background color is overlaid upon them. (Browser)

I'm working on some background art, and I'm going to be using it alongside a background color which will be overlaid on it. But the behavior of the background color overlay doesn't make sense. The color of the lines are different than the color of the squares when a background color is applied, but the same when there is no background

body {
    background-color: #2d3137; /*Background 1*/
    background-image: url('/static/bg.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

Original:

Background #1:

Background #2: