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 中却不行。 我做错了什么？

Answer 1

这是因为“混合混合模式”not fully supported in Chrome for SVG

但您可以在父级上添加“隔离”到圆形容器（如 MDN 示例中）：

/* 不隔离，会考虑背景色 */

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

这实际上对我有用(here is fiddle)