我有这段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中不行。我做错了什么?