Css SVG圆圈在Chrome中不工作

我有这个svg代码。它在Firefox和Safari中运行良好。但由于某些原因，它没有出现在Chrome中。我不明白为什么

<svg version="1.1" id="red_rgb" viewBox="0 0 100 56" xmlns="http://www.w3.org/2000/svg">
    <circle class="red" cx="50" cy="18" r="18"/>
    <circle class="green" cx="39" cy="37" r="18"/>
    <circle class="blue" cx="61" cy="37" r="18"/>
</svg>

如前所述：它在FireFox和Safari中运行良好，但在Chrome中则不行。 我做错了什么？

这是因为“混合模式”

但您可以在父循环容器上添加“隔离”（如MDN示例中所示）：

/*如果没有隔离，将考虑背景色*/

---

这对我来说确实有效

@TemaniAfif，就我个人而言，我觉得小提琴更舒适，口味更重要，而且它与acc有关，所以应该一直保持到chrome行为改变为止，还有我添加到答案中的所有基本代码（1行），…）关闭SO acc也是一样），您不能使用SO代码段，而且它的编辑器也不太舒服（当然是IMHO），所以让我们结束这场辩论，除非它涉及到解决方案本身，k？绝对不是这样

.rgb_content    {
    width: 100%;
    height: 230%;
    position: absolute;
    left:0;
    top:12.5%; 
    z-index: 2;
    }       

.rgb_svg {
    position: absolute;
    z-index: 10;
}

circle.red {
    fill: red;
}

circle.green {
    fill: green;
}

circle.blue {
    fill: blue;
}   

circle.red, circle.green, circle.blue {
    mix-blend-mode: lighten;
}

.rgb_text {
    position: absolute;
    mix-blend-mode: hue;                
    z-index: 20;                
}

svg {isolation: isolate;}
circle.red, circle.green, circle.blue {
    mix-blend-mode: lighten;
}