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

Question

I have an svg for a cart icon and am able to style it with css. I would like to change the color of the cart based on window size. The problem is @media reads the size of the image to test the media query rather than the window.

<defs>
    <style type="text/css">
        @media screen and (min-width: 1000px) {
            #Mobile {
                fill: #fff;
            }
        }
    </style>
</defs>

The size of the image is 40 x 40px. Since the size of the image is set to remain constant the media query never becomes active. Is there a way to make this bypass image size and read screen width like a normal media query?

I'm calling the svg in my html like this:

<object id="cartIcon" type="image/svg+xml" data="Assets/icon-shopping-cart.svg"></object>

Answer 1

I would apply the style via JS and use clientWidth and clientHeight to do the detection.

var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;

if ( width === 456 || height === 123) {
  var element = document.getElementById("Mobile");
  element.style.fill = "white"; 
}