在黑暗模式下嵌入的SVG图像出现问题 [英] Issue with embedded SVG images in dark mode
本文介绍了在黑暗模式下嵌入的SVG图像出现问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
标签内的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屋!
查看全文