CSS：mix-blend-mode = color-dodge 在 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>