Svg图像内部彩色<；部门>；：如何将混合模式应用于HTML背景色？_Html_Svg_Mix Blend Mode

Svg图像内部彩色<；部门>；：如何将混合模式应用于HTML背景色？

html svg

Svg图像内部彩色<；部门>；：如何将混合模式应用于HTML背景色？,html,svg,mix-blend-mode,Html,Svg,Mix Blend Mode,我有一个SVG文件，在特定元素上定义了混合模式样式。混合正确地应用于SVG中的其他元素，但不适用于包含HTML的背景色例如： <!doctype html> <html> <head> <style> body { margin: 0; } main { height: 100px; background-color:

我有一个SVG文件，在特定元素上定义了

混合模式

样式。混合正确地应用于SVG中的其他元素，但不适用于包含HTML的背景色

例如：

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


身体{
保证金：0；
}
主要{
高度：100px；
背景色：暗色；
}

我该如何改进它，使黑色改变红色HTML背景

通缉结果：

将

混合模式

规则添加到

？这就是你想要的吗

正文{
保证金：0；
}
主要{
高度：100px；
背景色：暗色；
}
svg{
混合模式：倍增；
}

No：图像的一部分必须是素色（此处为黄色圆圈），而另一部分必须与后面的所有内容混合，包括HTML背景。我用想要的结果更新了我的问题。你在使用Firefox吗？我得到了你想要的结果，只是在Chrome上使用了你原来的SVG。但它在Firefox上不起作用。我不知道为什么。我会在firefox上查找相关问题，谢谢。