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>