在黑暗模式下嵌入的SVG图像出现问题 [英] Issue with embedded SVG images in dark mode

问题描述

标签内的svg嵌入式图像不适用于媒体查询偏好的color-scheme和CSS变量(Chrome和Safari，Firefox可以使用).

Embedded svg image inside tag doesn't work with media query prefers-color-scheme and CSS variables (Chrome and Safari, Firefox works).

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

推荐答案

尝试一下:

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

这篇关于在黑暗模式下嵌入的SVG图像出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！