Adaptive svg backgrounds

Я стараюсь, чтобы svg показывал разные изображения на основе размера экрана, поэтому меньшие устройства показывают меньшие изображения. Например, если я хочу, фоновое изображение, охватывающее всю область, SVG что-то вроде этого:Adaptive svg backgrounds

<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 a svg attribute вместо css), чтобы браузер загружал только изображение, необходимое для активного размера экрана?

источник

2014-01-17 henit

Вместо этого вы можете использовать данные SVG или фактический SVG-код. Они автоматически делают это –

Есть ли причина, по которой вы не можете поместить CSS в таблицу стилей? –

Это просто упрощенный пример, цель состоит в том, чтобы иметь контент изображения в файлах SVG, но загружать разные версии на основе разрешения экрана (или других различий в материалах, таких как соотношение пикселей) – henit

Медиа-запрос относится к идентификатору под названием «TheImage», в то время как объект не идентифицирован с этим идентификатором. Ваши изображения отождествляются с идентификаторами «bg-large» и «bg-small».

Тем не менее, в соответствии с написанным кодом, оба изображения будут загружены. Чтобы отобразить их или нет, вам нужно использовать атрибут «display», установив его «none», когда вы хотите, чтобы изображение было скрыто.

источник

2018-02-27 08:40:03 Hector

Adaptive svg backgrounds

ответ

Смежные вопросы