SVG 笔划无法与 CSS 变量一起正常工作

Question

我正在尝试根据配色方案为我的 SVG 徽标设置不同的描边颜色，但它不想正确更改，因为它会始终保持白色...

@media (prefers-color-scheme: white) {
    :root {
        --color: #000;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --color: #fff;
    }
}

#logo path {
    stroke: var(--color);
}

问题是如果我将描边颜色更改为任何颜色，例如描边：红色，它会保持红色...

Answer 1

你应该使用：

prefers-color-scheme: light

改为：

prefers-color-scheme: white

SVG 笔划无法与 CSS 变量一起正常工作

SVG stroke not working properly with CSS Variables

css

svg

media-queries