自適應svg的背景

我想讓svg根據屏幕大小顯示不同的圖像，所以較小的設備顯示較小的圖像。舉例來說，如果我想要一個背景圖像覆蓋整個SVG區域，像這樣：自適應svg的背景

<svg viewBox="0 0 1000 700"> 
    <defs> 
     <style type="text/css"> 
      #theImage { 
       fill: url('#bg-large'); 
      } 
      @media screen and (min-width: 401px) and (max-width: 800px) { 
       #theImage { 
        fill: url('#bg-small'); 
       } 
      } 
     </style> 

     <pattern id="bg-large" width="100%" height="100%"> 
      <image xlink:href="large.jpg" width="100%" height="100%" /> 
     </pattern> 

     <pattern id="bg-small" width="100%" height="100%"> 
      <image xlink:href="small.jpg" width="100%" height="100%" /> 
     </pattern> 
    </defs> 

    <rect id="theImage" width="100%" height="100%" /> 
</svg>

它的工作原理，但瀏覽器在任何屏幕尺寸下載兩個圖像。是否有另一個（mabye svg屬性方式，而不是css），使瀏覽器只加載活動屏幕大小所需的圖像？

來源

2014-01-17 henit

你可以使用SVG數據或實際的SVG代碼。他們自動執行此操作 –

是否有原因導致您無法將CSS放入樣式表中？ –

這只是一個簡單的例子，目標是在SVG文件中包含圖像內容，但是會根據屏幕分辨率（或其他像素比例等媒體差異）加載不同的版本， – henit

媒體查詢引用的是一個名爲「TheImage」的ID，而沒有使用此ID標識的對象。你的圖像被標識爲id的「bg-large」和「bg-small」。

不過，根據編寫的代碼，這兩個圖像都將被下載。要顯示或不顯示，只要你想隱藏圖像就需要使用「顯示」屬性

來源

2018-02-27 08:40:03 Hector

自適應svg的背景

回答

相關問題