Wie css Medienabfragen in Svg basierend auf dem Bildschirm nicht img Größe verwenden?

Question

Ich habe eine Svg für ein Einkaufswagen-Symbol und kann es mit CSS zu stylen. Ich möchte die Farbe des Wagens basierend auf der Fenstergröße ändern. Das Problem ist @media liest die Größe des Bildes, um die Medienabfrage anstelle des Fensters zu testen.

Die Größe des Bildes ist 40 x 40px. Da die Größe des Bildes konstant bleibt, wird die Medienabfrage niemals aktiv. Gibt es eine Möglichkeit, diese Umgehungsbildgröße zu erstellen und die Bildschirmbreite wie eine normale Medienabfrage zu lesen?

Ich rufe die svg in meinem html wie folgt aus:

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

Answer 1

ich den Stil über JS gelten und verwenden clientWidth und clientHeight den Nachweis zu tun.

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

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