“解决了”我正在尝试为我的网站制作一个暗/亮模式图标,所以我制作了代码:
<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>
这只是一种猜测,但您可能正在处理viewbox问题。如果我没有搞错的话,x=
和y=
(viewbox属性)必须在SVG标记上,而不是在SVG中的
标记上。
另外,您可能拼错了SVG
标记
有关ViewBox的详细信息,请参阅此其他答案:
如何使用