CODEWITHSUNDEEP
csssvgblendingcompositing
oceanGermanique
oceanGermanique

Reputation: 409

I would like to understand the example given in the mix-blend-mode specification

in the link below, example #2 shows 3 circles drawn in SVG and having
the mix-blend-mode property. mix-blend-mode example 2

I have reproduced this example below

circle {
  mix-blend-mode: screen;
}
svg { 
  background-color:rgb(120,55,60);
}
<svg>
  <circle cx="40" cy="40" r="40" fill="red"/>
  <circle cx="80" cy="40" r="40" fill="lime"/>
  <circle cx="60" cy="80" r="40" fill="blue"/>
</svg>

I'm trying to apply the mix-blend-mode property in div elements and understand which properties I need to add to get the same result as with svg elements.

I reproduced the example without going through the svg elements, my goal is to reproduce the same result with div elements and their property, and understand how the display is calculated with the mix-blend-mode property .
(well I didn't reproduce circles but squares)

#container {
  width:100px;
  height:100px;
  background-color:rgb(120,55,60);
}
#carre1 {
  background-color:rgb(255,0,0);
}
#carre2 {
  background-color:rgb(0,255,0);
  position:relative;
  top:-35px;
  left:26px;
}
#carre3 {
  background-color:rgb(0,0,255);
  position:relative;
  top:-65px;
  left:16px;
}
.carre {
  mix-blend-mode: screen;
  width:50px;
  height:50px;
}
<div id="container">
  <div class="carre" id="carre1"></div>
  <div class="carre" id="carre2"></div>
  <div class="carre" id="carre3"></div>
</div>

my question:
in this last example, with the div elements, what properties should be added to obtain the same result as with the SVG elements ?

ok...problem! the result is not the same depending on the browser:
with Chrome I have this:
with chrome
with firefox :
with firefox

I use firefox and that's why I asked the question. But I think it's chrome that's buggy, and that the difference between my example with squares and the example with circles is normal because it's missing a property

**

updated : maybe I understood, I say maybe

**
for the example with divs, I placed the

isolation:isolate

property, in an intermediate div#divForIsolate (and not in the same div that contained the background color).
And then, the result is the same with svg and with div. This would mean, perhaps, that the svg element contains the isolate property. If someone can confirm this for me, that would be welcome.

body {
  background-color:rgb(120,55,60);
}
.circle {
  mix-blend-mode:screen;
}

#divForIsolate {
  isolation:isolate;
}
.carre {
  mix-blend-mode:screen;
}
#carre1 {
  background-color:rgb(255,0,0);
  width:80px;
  height:80px;
}
#carre2 {
  background-color:rgb(0,255,0);
  position:relative;
  width:80px;
  height:80px;
  top:-80px;
  left:40px;
}
#carre3 {
  background-color:rgb(0,0,255);
  position:relative;
  top:-120px;
  left:20px;
  width:80px;
  height:80px;
}
<svg>
  <circle class="circle" cx="40" cy="40" r="40" fill="red"/>
  <circle class="circle" cx="80" cy="40" r="40" fill="lime"/>
  <circle class="circle" cx="60" cy="80" r="40" fill="blue"/>
</svg>

<div id="divForIsolate">
  <div class="carre" id="carre1"></div>
  <div class="carre" id="carre2"></div>
  <div class="carre" id="carre3"></div>
</div>

In the link below, they say: the group must become isolated. But what is the "group"? https://drafts.fxtf.org/compositing/#mix-blend-mode Compositing and Blending Level 2

Upvotes: 1

Views: 82

Answers (0)

Related Questions