1

我正在尝试stop-color在暗模式下更改 svg 。这就是我所做的：

  stop[offset="10%"] {
    stop-color: var(--stop-10);
  }
  stop[offset="95%"] {
    stop-color: var(--stop-95);
  }

@media (prefers-color-scheme: light) {
  :root {
    --stop-10: red;
    --stop-95: gold;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --stop-10: pink;
    --stop-95: green;
  }
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <radialGradient id="myGradient">
      <stop offset="10%"  />
      <stop offset="95%"  />
    </radialGradient>
  </defs>
 
  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>
</body>
</html>

它在 Firefox 和 Safari 中按预期工作。但它不在基于 Chromium 的浏览器中。启用暗模式时颜色不会改变。

这是铬中的错误吗？有什么办法吗？

4

0 回答 0