0

I have a SVG file with mix-blend-mode styles defined on specific elements. The blend applies correctly to the other elements inside the SVG, but not to the containing HTML <div> background color.

Example:

<!doctype html>
<html>
<head>
    <style>
        body {
            margin: 0;
        }
        main {
            height: 100px;
            background-color: darkred;
        }
    </style>
</head>
<body>
    <main>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="180" height="180" viewBox="0 0 450 450">
            <circle cx="174" cy="165" r="160" style="fill: yellow" />
            <circle  cx="245" cy="260" r="160" style="mix-blend-mode: multiply; fill: darkcyan" />
        </svg>
    </main>
</body>
</html>

How can I improve it, so that the darkcyan color alters the red HTML background ?

Screenshot

Wanted result:

Wanted result

yolenoyer
  • 8,797
  • 2
  • 27
  • 61

1 Answers1

0

Add a mix-blend-mode rule to the <svg>? Is this what you are after?

body {
    margin: 0;
}
main {
   height: 100px;
   background-color: darkred;
}
svg {
   mix-blend-mode: multiply;
}
<main>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="180" height="180" viewBox="0 0 450 450">
        <circle cx="174" cy="165" r="160" style="fill: yellow" />
        <circle  cx="245" cy="260" r="160" style="mix-blend-mode: multiply; fill: darkcyan" />
    </svg>
</main>
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • No: a part of the image must be in plain colors (here, the yellow circle), while the other part must blend with everything behind it, including the HTML background. I updated my question with the wanted result. – yolenoyer May 28 '21 at 04:24
  • Are you using Firefox? I get the result you are after just with your original SVG on Chrome. But it doesn't work on Firefox. I am not sure why. – Paul LeBeau May 28 '21 at 10:33
  • Indeed. I will look for issues about it on firefox, thank you. – yolenoyer May 28 '21 at 11:00