CSS:混合混合模式=颜色躲避在Chrome中不起作用，但在Firefox中可以

Question

我正在尝试使用一种效果，其中在不同位置叠加相同的形状(在我的例子中为 SVG(，并且其颜色应该"躲避颜色"。形状有红色、绿色和蓝色的原色。在所有形状相交的地方，颜色为白色，而在其他地方发生组合。我在 https://codepen.io/anon/pen/dgKQqz 创建了一支笔来演示。简而言之，样式：

body { background-color: #222; }
.demo { mix-blend-mode: color-dodge; }
.center { position: fixed; top: 50%; left: 50%; }
.pr { transform: translate(-30%, -50%); }
.pg { transform: translate(-80%, -50%); }
.pb { transform: translate(-50%, -30%); }

和形状：

<svg class="demo center pr" width="100" height="100">
<circle cx="50" cy="50" r="40" fill="#ff0000" />
</svg>
<svg class="demo center pg" width="100" height="100">
<circle cx="50" cy="50" r="40" fill="#00ff00" />
</svg>
<svg class="demo center pb" width="100" height="100">
<circle cx="50" cy="50" r="40" fill="#0000ff" />
</svg>

这在 Firefox (62( 中按我的预期工作，但在 Chrome (70( 中似乎没有发生混合。问题不在于 SVG，因为即使是div元素中的常规文本也会像描述的那样运行。

我做错了什么，是否可以实现这一点，使其在两个浏览器中都有效，或者这是一个 Chrome 错误？

Answer 1

实际上，使用 SVG 作为background-image是有效的：

.demo {
width:100px;
height:100px;
mix-blend-mode: color-dodge;
}
body {
background-color: #222;
}
.center {
position: fixed;
top: 50%;
left: 50%;
}
.pr {
transform: translate(-30%, -50%);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='%23ff0000' /%3E%3C/svg%3E");
}
.pg {
transform: translate(-80%, -50%);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='%2300ff00' /%3E%3C/svg%3E");
}
.pb {
transform: translate(-50%, -30%);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='%230000ff' /%3E%3C/svg%3E");
}

<div class="demo center pr"></div>
<div class="demo center pg"></div>
<div class="demo center pb"></div>