我有一个用于购物车图标的 svg,并且可以使用 CSS 对其进行样式设置。我想根据窗口大小更改购物车的颜色。问题是 @media
读取图像的大小来测试媒体查询而不是窗口。
<defs>
<style type="text/css">
@media screen and (min-width: 1000px) {
#Mobile {
fill: #fff;
}
}
</style>
</defs>
图像的大小为 40 x 40 像素。由于图像的大小设置为保持不变,因此媒体查询永远不会激活。有没有办法像普通媒体查询一样绕过图像大小和读取屏幕宽度?
我在我的 html 中这样调用 svg:
<object id="cartIcon" type="image/svg+xml" data="Assets/icon-shopping-cart.svg"></object>
最佳答案
我会通过 JS 应用样式并使用 clientWidth
和 clientHeight
进行检测。
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
if ( width === 456 || height === 123) {
var element = document.getElementById("Mobile");
element.style.fill = "white";
}
关于css - 如何在基于屏幕而不是 img 大小的 svg 中使用 css 媒体查询?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37217299/