系统暗/亮模式图标

Question

“解决了”我正在尝试为我的网站制作一个暗/亮模式图标，所以我制作了代码：

<svg>
 <style>
    @media (prefers-color-scheme: dark) {
      .dark {
        display:none;
      }
      .light {
        display:true;
      }
    }
    @media (prefers-color-scheme: light) {
      .dark {
        display:true;
      }
      .light {
        display:none;
      }
    }
  </style>
<img x="0" y="0" class="dark" src="https://7c-code.tk/favicon/icon-dark.png" width="100px" height="100px" ></img>
<img x="0" y="0" class="light" src="https://7c-code.tk/favicon/icon-dark.png" width="100px" height="100px" ></img>
</svg>

它工作正常，但只能在html中呈现，所以我将它改成

<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
 <style>
    @media (prefers-color-scheme: dark) {
      .dark {
        display:none;
      }
      .light {
        display:true;
      }
    }
    @media (prefers-color-scheme: light) {
      .dark {
        display:true;
      }
      .light {
        display:none;
      }
    }
  </style>
<img x="0" y="0" class="dark" src="https://7c-code.tk/favicon/icon-dark.png" width="100px" height="100px" ></img>
<img x="0" y="0" class="light" src="https://7c-code.tk/favicon/icon-dark.png" width="100px" height="100px" ></img>
</svg>

现在，由于某种原因，所有元素都定位在右下角，尽管我为图像指定了x和y位置。我怎么解决这个？提前道谢！

编辑：原来我只是哑巴，我不知道html img和svg图像有什么不同。解决了，下面是我的代码：

<svg viewbox="0 0 100 100"  xmlns="http://www.w3.org/2000/svg">
 <style>
    @media (prefers-color-scheme: dark) {
      .dark {
        display:none;
      }
      .light {
        display:true;
      }
    }
    @media (prefers-color-scheme: light) {
      .dark {
        display:true;
      }
      .light {
        display:none;
      }
    }
  </style>
<image x="0" y="0" class="dark" href="https://7c-code.tk/favicon/icon-dark.png" width="100px" height="100px" ></image>
<image x="0" y="0" class="light" href="https://7c-code.tk/favicon/icon-dark.png" width="100px" height="100px" ></image>
</svg>

Answer 1

这只是一种猜测，但您可能正在处理viewbox问题。如果我没有搞错的话，x=和y=（viewbox属性）必须在SVG标记上，而不是在SVG中的标记上。

另外，您可能拼错了SVG标记

有关ViewBox的详细信息,请参阅此其他答案：

如何使用