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>

CSS：mix-blend-mode = color-dodge在Chrome中不起作用，但在Firefox中还可以

1 个答案: