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