为什么“配色方案:深色”会导致<object>s在Chrome中有白色背景？

Question

我有一个使用<object>渲染外部SVGs的站点，其中很多都有透明的背景。我添加了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>

​

这里发生了什么事？这是铬的缺陷吗？或者，<object>、SVG或color-scheme是否有我误解的地方？

Answer 1

我也遇到了这个问题，这篇文章是我唯一能找到的关于这个具体问题的东西。发布半修复以帮助他人。如果你的背景颜色是实心的(不是渐变或图像)，我就能找到一个解决方案。

我直接向SVG添加了背景色样式--在我的例子中，是通过标记添加的，通过ID标记引用SVG本身。所述颜色与我的SVG对象标记中包含的背景色相匹配。此样式是通过暗模式媒体查询来限定范围的。顺便提一句，我不得不缓存<object>标记的数据src。添加查询字符串可以做到这一点。例：?v.22.4.6

下面是我如何绕过这个bug的一个例子：

中对象中的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>
...