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

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

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

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

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

Answer 2

问题在于mix-blend-mode，你可以在知道问题部分看到here：

Chrome / Opera有时会错误地渲染混合混合模式

添加黑色背景，您将看到圆圈：

body {
  background: #000;
}

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

如果你做一些研究，你也会看到它的常见问题（根据具体情况，你会找到一些解决方法）。

---

您还可以看到圆圈在没有mix-blend-mode或此属性的其他值的情况下显示正常：

.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 {

}

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

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