我有一个网站，它使用<object>来渲染外部SVG，其中许多具有透明背景。我添加了CSS属性color-scheme: dark；可以使用操作系统深色方案来呈现"；。然而，在Chrome/Blink中，这会导致<object>元素具有白色背景！这是一个最小的演示：
:root {
background-color: blue;
/*
In Chrome/Edge, the following makes the <object> have a white background!
In Firefox/Safari, it stays transparent.
*/
color-scheme: dark;
}
body {
margin: 0;
}<object
type="image/svg+xml"
data="data:image/svg+xml,%3Csvg version='1.1' width='300' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='150' cy='100' r='80' fill='green' /%3E%3C/svg%3E%0A">
SVG not supported
</object>这是怎么回事？这是Chromium中的一个bug吗？或者<object>、SVG或color-scheme是否有我误解的地方？
我也遇到过这个问题，这篇文章是我能找到的关于这个特定问题的唯一东西。发布半修复来帮助他人。我找到了一个关于的作品，如果你的背景颜色是纯色(而不是渐变或图像(。
我直接向SVG添加了一个背景颜色样式——在我的例子中是通过标记，通过ID标记引用SVG本身。所述颜色与我的SVG对象标记所包含的背景颜色相匹配。此样式的作用域是通过暗模式媒体查询确定的。顺便说一句，我不得不缓存<object>标记的数据src。添加查询字符串可以做到这一点。例如：？v.22.4.6
下面是一个我如何绕过这个错误的例子：
Header中Object中的SVG(这是一个徽标，请注意缓存破坏查询是可选的(
<header style="background-color:#00053E">
<object type="image/svg+xml" data="../the/link/to-your.svg?v22.6.3">
...
对象嵌入的SVG：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="SVG-ID-HERE" viewBox="0 0 291 31" preserveAspectRatio="xMidYMid meet">
<style type="text/css">
@media (prefers-color-scheme: dark)
{
#SVG-ID-HERE{ background-color: #00053E }
}
</style>
...
我刚刚遇到了同样的问题。基于线程中的@fregante答案，您所需要做的就是将配色方案：浅色或颜色方案：普通添加到对象css样式中。
这是没有白背景的例子
:root {
background-color: blue;
/*
In Chrome/Edge, the following makes the <object> have a white background!
In Firefox/Safari, it stays transparent.
*/
color-scheme: dark;
}
body {
margin: 0;
}
object {
color-scheme: light; /*<--Add this to fix WHITE BG issue*/
}<object
type="image/svg+xml"
data="data:image/svg+xml,%3Csvg version='1.1' width='300' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='150' cy='100' r='80' fill='green' /%3E%3C/svg%3E%0A">
SVG not supported
</object>有点晚了，但我发现如果你放上css：
object {
color-scheme: light;
}
它解决了问题！多亏了这篇帖子，以及你对问题的正确诊断，我修复了这个问题！谢谢