CSS: mix-blend-mode = color-dodge не работает в Chrome, но хорошо в Firefox - PullRequest
Новая
       52

CSS: mix-blend-mode = color-dodge не работает в Chrome, но хорошо в Firefox

0 голосов
/ 21 октября 2018

Я пытаюсь использовать эффект, когда одна и та же фигура (в моем случае 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

1 Ответ

0 голосов
/ 21 октября 2018

На самом деле использование 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>
...