为什么`color-scheme：dark` cause< object>s to have白色backgrounds in Chrome？

vecaoik1 于 2023-05-04 发布在 Go

关注(0)|答案(2)|浏览(119)

我有一个使用<object>渲染外部SVG的站点，其中许多都有透明的背景。我添加了CSS属性color-scheme: dark，表示它是"can be rendered using the operating system dark color scheme"。但是，在Chrome/Blink中，这会导致<object>元素具有白色背景！这是一个最小的demo：

: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有什么误解？

google-chrome

来源：https://stackoverflow.com/questions/70352898/why-does-color-scheme-dark-cause-objects-to-have-white-backgrounds-in-chrom

2条答案

按热度按时间

puruo6ea1#

我也遇到了这个问题，这篇文章是我唯一能找到的关于这个具体问题的东西。发布半固定帮助他人。我能够找到一个变通办法 * 如果 * 你的背景颜色是固体（不是梯度或图像）。
我直接向SVG添加了一个背景颜色样式-在我的例子中是通过标记，通过ID标记引用SVG本身。所述颜色与包含SVG对象标记的背景颜色相匹配。此样式通过暗模式媒体查询确定范围。顺便说一下，我必须缓存-bust <object>标记的数据src。添加一个查询字符串可以做到这一点。例如：？v.22.4.6
下面是一个我如何绕过这个bug的例子：

Object in Header中的SVG（是logo，该高速缓存破坏查询是可选的）

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

赞(0）回复(0）举报 2023-05-04

gjmwrych2#

有点晚了，但是我发现如果你放上css：