提问者:小点点

系统暗/亮模式图标


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

<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>

共1个答案

匿名用户

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

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

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

如何使用viewBox属性?