css - 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

这是因为“mix-blend-mode”not fully supported in Chrome for SVG

但是您可以在父容器上添加“隔离”到圆形容器(就像在 MDN 示例中一样):

/* without isolation, the background color will be taken into account */

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

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