彩色 <div> 内的 Svg 图像：如何将混合混合模式应用于 HTML 背景颜色？答案

【问题标题】：Svg image inside colored <div>: how to apply mix-blend-mode to the HTML background color?彩色 <div> 内的 Svg 图像：如何将混合混合模式应用于 HTML 背景颜色？
【发布时间】：2021-08-15 18:34:12
【问题描述】：

我有一个 SVG 文件，其中在特定元素上定义了 mix-blend-mode 样式。混合正确应用于 SVG 内的其他元素，但不适用于包含 HTML <div> 背景颜色。

例子：

<!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>

如何改进它，让深青色改变红色 HTML 背景？

想要的结果：

【问题讨论】：

标签： html svg mix-blend-mode

【解决方案1】：

将mix-blend-mode 规则添加到<svg>?这就是你所追求的吗？

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>

【讨论】：

否：图像的一部分必须是纯色（这里是黄色圆圈），而另一部分必须与它后面的所有内容混合，包括 HTML 背景。我用想要的结果更新了我的问题。
您使用的是 Firefox 吗？我得到了你在 Chrome 上使用原始 SVG 的结果。但它不适用于 Firefox。我不知道为什么。
确实如此。我将在firefox上寻找有关它的问题，谢谢。