SVG圆形在Chrome中无法正常工作

Question

我有这段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>

并且这个CSS

.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;                
}

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

- Donald Roos

Answer 1

这是因为在SVG中，“mix-blend-mode”在Chrome中不完全支持

但是您可以在父级圆形容器上添加“isolate”（就像MDN示例中一样）：

/* 没有隔离，背景颜色将被考虑在内 */

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

那对我确实很有效 (这里是 jsFiddle)

- 2oppin

---

@TemaniAfif，就我个人而言，我更喜欢fiddles，这是一种口味问题，此外它与acc相关联，因此应该保留直到Chrome的行为发生改变，另外我已经添加了所有必要的代码（1行）来回答您的问题。 - 2oppin

同样适用于关闭SO账户，您不能玩弄SO代码片段，它的编辑器也不太舒适（当然是我的个人看法），所以除非涉及解决方案本身，否则让我们结束这场辩论，好吗？这绝对不是SO的方式。 - 2oppin