暗模式下嵌入 SVG 图像的问题答案

【问题标题】：Issue with embedded SVG images in dark mode暗模式下嵌入 SVG 图像的问题
【发布时间】：2019-10-21 20:13:31
【问题描述】：

标签内嵌入的 svg 图像不适用于媒体查询 prefers-color-scheme 和 CSS 变量（Chrome 和 Safari，Firefox 可以）。

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--color)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
    <style>
        :root{--color:#ffffff;}
        @media(prefers-color-scheme:light){:root{--color:#ffffff;}}
        @media(prefers-color-scheme:dark){:root{--color:#000000;}}
    </style>
    <path d="M18 15l-6-6-6 6"/>
</svg>

【问题讨论】：

您的问题是什么？预期的输出应该是什么？阅读Stack Overflow Tour
SVG 嵌入在中。在启用的暗模式下，它应该使用暗色的颜色。但在 Chrome 和 Safari 中，它采用与全局 CSS 表相同的颜色。所以图像根本不可见。 CSS 样式表不应影响嵌入的 SVG 图像。有没有办法在暗模式下更改嵌入式 SVG 图像的颜色？（currentColor 也不起作用）..
所以你问为什么<img> 没有显示？如果是这样，请编辑您的帖子以包含有关未显示的<img> 的代码。另外，编辑您的帖子以提出问题，它应该包含一个问号。

标签： css svg media-queries

【解决方案1】：

试试这个：

<?xml version="1.0" encoding="utf-8"?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  width="48" height="48">
  <style>
    :root { --color: #00FF00; }
    @media (prefers-color-scheme: light) { :root { --color: #0000FF; } }
    @media (prefers-color-scheme: dark) { :root { --color: #FF0000; } }
    path {
      fill: none;
      stroke: var(--color);
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
  </style>
  <path d="M18 15l-6-6-6 6"/>
</svg>

【讨论】：

我刚刚验证了这种技术在 Safari 和 Brave 中有效。我要提到的一件事是，为了让它在 Safari 中工作，我使用object 标签嵌入图像，而不是img 标签。例如<object type="image/svg+xml" data="image.svg"></object> 谢谢@Vino。