css - 如何在基于屏幕而不是 img 大小的 svg 中使用 css 媒体查询？

Question

我有一个用于购物车图标的 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>

Answer 1

我会通过 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"; 
}