如何使用基於屏幕不是img大小的svg中的CSS媒體查詢？

我有一個購物車圖標的SVG，我可以用CSS來設計它。我想根據窗口大小更改購物車的顏色。問題是@media讀取圖像的大小以測試媒體查詢而不是窗口。如何使用基於屏幕不是img大小的svg中的CSS媒體查詢？

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

的圖像的大小是40×40像素。由於圖像的大小設置爲保持不變，因此媒體查詢不會變爲活動狀態。有沒有辦法讓這個旁路圖像大小和閱讀屏幕寬度像一個正常的媒體查詢？

我打電話SVG在我的HTML這樣的：

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

來源

2016-05-13 Jake Zeitz

我會通過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"; 
}

來源

2016-05-13 18:54:51 staypuftman

這是一個不錯的選擇，但您是否說媒體查詢不可能讀取svg中的屏幕大小？ –

那麼，'min-width'和'max-width'傳統上是如何在CSS中使用媒體查詢進行窗口大小檢測的。如果這些不夠精確，你可能不得不依靠JS。儘管CSS中可能有另一種方式，請看你是否得到了更好的答案。 – staypuftman

如何使用基於屏幕不是img大小的svg中的CSS媒體查詢？

回答

相關問題