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

编程问答 2022-04-29

问题描述

我有一个在特定元素上定义了 mix-blend-mode 样式的 SVG 文件。混合正确应用于 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 背景？

Screenshot

想要的结果：

Wanted result

解决方法

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

htmlmix-blend-modesvgsvgsvg