7

Есть ли способ менять размеры изображения паттерна (SVG) в зависимости от размеров окна браузера ?

Приведу пример:

.decor_404 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  
  background-color: #000;
  z-index: 2;
}

.st0 {
  fill: #ebe5dd;
}

.st1 {
  fill: #d9ccbc;
}

.st2 {
  fill: #ffdc40;
}

.st6 {
  fill: #994c0f;}

.decor{width: 1600px}

@media (max-width: 450px) {
  .decor{width: 400px}
}
   <div class="decor_404">
  <svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 400 400" preserveAspectRatio="xMinYMin meet">
    <defs>
        <pattern id="path404" x="0" y="0" width="100px" height="100" viewBox="0 0 50 50" patternUnits="userSpaceOnUse">
            <path class="st0" d="M0 31.3h16.4v2.9H0z"/><path class="st1" d="M33.4 31.3H50v2.9H33.4z"/><path transform="rotate(-8.488 11.5788 38.36)" class="st0" d="M2.8 36.9h17.5v2.9H2.8z"/><path transform="rotate(-81.553 38.4156 38.361)" class="st1" d="M37 29.6h2.9v17.5H37z"/><path class="st2" d="M9.3 18.6C4.2 18.6 0 14.4 0 9.3S4.2 0 9.3 0s9.3 4.2 9.3 9.3c0 2.1-.7 4-1.9 5.6l-3.9 3c-1.1.4-2.3.7-3.5.7z"/><path d="M40.7 18.6c-1.2 0-2.4-.2-3.5-.7l-3.9-3c-1.2-1.6-1.9-3.6-1.9-5.6 0-5.1 4.2-9.3 9.3-9.3S50 4.2 50 9.3s-4.2 9.3-9.3 9.3z" fill="#ffab15"/><path d="M25 44.9L11.2 28.7c-2.6-3-3.2-7.2-1.5-10.9 1.7-3.7 5.3-6 9.3-6h12c4 0 7.6 2.3 9.3 6 1.7 3.7 1.1 7.9-1.5 10.9L25 44.9z" fill="#ffea84"/><path class="st2" d="M40.3 17.8c-1.7-3.7-5.3-6-9.3-6h-6v33.1l13.8-16.2c2.6-3 3.2-7.2 1.5-10.9z"/><path d="M25 50c-1.6 0-2.9-1.3-2.9-2.9s1.3-2.9 2.9-2.9 2.9 1.3 2.9 2.9S26.6 50 25 50z" fill="#bf6015"/><circle class="st6" cx="20.1" cy="23" r="2"/><circle cx="29.9" cy="23" r="2" fill="#713708"/><path class="st6" d="M25 44.1V50c1.6 0 2.9-1.3 2.9-2.9s-1.3-3-2.9-3z"/>
        </pattern>
    </defs>
    <rect class="decor" x="0" y="0" width="100%" height="100%" fill="url(#path404)" />
</svg>
</div>

В приведенном выше примере размеры паттерна меняются, изменяя значения width height у тега pattern. Но пробросить @media вот так:

    @media only screen and (max-width: 768px) {
.decor_404 svg  pattern{width:200px; height:200px;}
    }

не получается.

Есть ли другие способы?

0

2 ответа 2

4

Подскажите, пожалуйста, есть ли способ менять размеры изображения патерна (SVG) в зависимости от размеров окна браузера?

Масштабирование изображения в SVG возможно только при указании viewBox

В случае применения патерна в SVG файле нужно использовать viewBox дважды:
внутри патерна

<pattern id="path404" x="0" y="0" width="100px" height="100px" viewBox="0 0 50 50" patternUnits="userSpaceOnUse">` 

и в шапке SVG файла:

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 1400 1000" preserveAspectRatio="xMinYMin meet">

svg блок обёрнут контейнером

.decor_404 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: #000;
  z-index: 2;
}

Задавая высоту и ширину его в процентах или в относительных единицах vh и vw и задав
viewBox="0 0 1400 1000" для SVG, получаем масштабирование патерна в зависимости от изменения окна браузера

.decor_404 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #000;
  z-index: 2;
}

.st0 {
  fill: #ebe5dd;
}

.st1 {
  fill: #d9ccbc;
}

.st2 {
  fill: #ffdc40;
}

.st6 {
  fill: #994c0f;
<div class="decor_404">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 1400 2800" preserveAspectRatio="xMinYMin meet">
        <defs>
            <pattern id="path404" x="0" y="0" width="100px" height="100" viewBox="0 0 50 50" patternUnits="userSpaceOnUse">
                <path class="st0" d="M0 31.3h16.4v2.9H0z"/><path class="st1" d="M33.4 31.3H50v2.9H33.4z"/><path transform="rotate(-8.488 11.5788 38.36)" class="st0" d="M2.8 36.9h17.5v2.9H2.8z"/><path transform="rotate(-81.553 38.4156 38.361)" class="st1" d="M37 29.6h2.9v17.5H37z"/><path class="st2" d="M9.3 18.6C4.2 18.6 0 14.4 0 9.3S4.2 0 9.3 0s9.3 4.2 9.3 9.3c0 2.1-.7 4-1.9 5.6l-3.9 3c-1.1.4-2.3.7-3.5.7z"/><path d="M40.7 18.6c-1.2 0-2.4-.2-3.5-.7l-3.9-3c-1.2-1.6-1.9-3.6-1.9-5.6 0-5.1 4.2-9.3 9.3-9.3S50 4.2 50 9.3s-4.2 9.3-9.3 9.3z" fill="#ffab15"/><path d="M25 44.9L11.2 28.7c-2.6-3-3.2-7.2-1.5-10.9 1.7-3.7 5.3-6 9.3-6h12c4 0 7.6 2.3 9.3 6 1.7 3.7 1.1 7.9-1.5 10.9L25 44.9z" fill="#ffea84"/><path class="st2" d="M40.3 17.8c-1.7-3.7-5.3-6-9.3-6h-6v33.1l13.8-16.2c2.6-3 3.2-7.2 1.5-10.9z"/><path d="M25 50c-1.6 0-2.9-1.3-2.9-2.9s1.3-2.9 2.9-2.9 2.9 1.3 2.9 2.9S26.6 50 25 50z" fill="#bf6015"/><circle class="st6" cx="20.1" cy="23" r="2"/><circle cx="29.9" cy="23" r="2" fill="#713708"/><path class="st6" d="M25 44.1V50c1.6 0 2.9-1.3 2.9-2.9s-1.3-3-2.9-3z"/>
            </pattern>
        </defs>
        <rect x="0" y="0" width="100%" height="100%" fill="url(#path404)" />
    </svg>
</div>

Update
В комментарии

А можно ли добиться, скажем, что б для устройств с экраном <450px было 4 крысы?

Представьте, что паттерн это тоже самое, как кафельная плитка в ванной.
У вас паттерн (одна плитка) имеет 100px в ширину.
Значит на ширине 400px уложится 4 плитки. Поэтому необходимо выбрать размер viewBox кратным (100 * 4) четырём.
При viewBox="0 0 400 400" - будет всегда, при любом разрешении экрана - 4 плитки по горизонтали

при - viewBox="0 0 800 800 - 8 плиток (8 крыс)

.decor_404 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  
  background-color: #000;
  z-index: 2;
}

.st0 {
  fill: #ebe5dd;
}

.st1 {
  fill: #d9ccbc;
}

.st2 {
  fill: #ffdc40;
}

.st6 {
  fill: #994c0f;
<div class="decor_404">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 400 400" preserveAspectRatio="xMinYMin meet">
        <defs>
            <pattern id="path404" x="0" y="0" width="100px" height="100" viewBox="0 0 50 50" patternUnits="userSpaceOnUse">
                <path class="st0" d="M0 31.3h16.4v2.9H0z"/><path class="st1" d="M33.4 31.3H50v2.9H33.4z"/><path transform="rotate(-8.488 11.5788 38.36)" class="st0" d="M2.8 36.9h17.5v2.9H2.8z"/><path transform="rotate(-81.553 38.4156 38.361)" class="st1" d="M37 29.6h2.9v17.5H37z"/><path class="st2" d="M9.3 18.6C4.2 18.6 0 14.4 0 9.3S4.2 0 9.3 0s9.3 4.2 9.3 9.3c0 2.1-.7 4-1.9 5.6l-3.9 3c-1.1.4-2.3.7-3.5.7z"/><path d="M40.7 18.6c-1.2 0-2.4-.2-3.5-.7l-3.9-3c-1.2-1.6-1.9-3.6-1.9-5.6 0-5.1 4.2-9.3 9.3-9.3S50 4.2 50 9.3s-4.2 9.3-9.3 9.3z" fill="#ffab15"/><path d="M25 44.9L11.2 28.7c-2.6-3-3.2-7.2-1.5-10.9 1.7-3.7 5.3-6 9.3-6h12c4 0 7.6 2.3 9.3 6 1.7 3.7 1.1 7.9-1.5 10.9L25 44.9z" fill="#ffea84"/><path class="st2" d="M40.3 17.8c-1.7-3.7-5.3-6-9.3-6h-6v33.1l13.8-16.2c2.6-3 3.2-7.2 1.5-10.9z"/><path d="M25 50c-1.6 0-2.9-1.3-2.9-2.9s1.3-2.9 2.9-2.9 2.9 1.3 2.9 2.9S26.6 50 25 50z" fill="#bf6015"/><circle class="st6" cx="20.1" cy="23" r="2"/><circle cx="29.9" cy="23" r="2" fill="#713708"/><path class="st6" d="M25 44.1V50c1.6 0 2.9-1.3 2.9-2.9s-1.3-3-2.9-3z"/>
            </pattern>
        </defs>
        <rect x="0" y="0" width="100%" height="100%" fill="url(#path404)" />
    </svg>
</div>

Если необходимо, чтобы размер одной плитки был постоянный - 100 х 100px при любом разрешении дисплея и при этом при разрешении 400px было 4 плитки, то тогда уже не обойтись без медиа запросов, в которых надо будет указывать разную фиксированную ширину для контейнера .decor_404

Например для разрешения экрана 400px .decor{width: 400px} - 4 плитки

Для разрешения 1600px - .decor{width: 1600px} - 16 плиток

В этом случае плитки будут одинакового размера, но будет разное количество при разных разрешениях экрана.

P.S.
Сейчас очень много гаджетов, поэтому медиа запросы в вёрстке практически не используют, так как нужно предусмотреть большое количество разрешений экрана.
На мой взгляд более практично использовать адаптивную вёрстку, как в моем первом примере, подкорректировав размеры viewBox

Связанный вопрос: Почему pattern заполняется белым квадратом 10 на 10

7
  • Я, наверное, что-то делаю не так, но у меня ничего не меняется. Я пробую в медиа выражении изменять значения высоты\ширины обертки изменений не наблюдаю 1 янв 2020 в 14:52
  • 1
    @BlackStar1991 но вроде и не нужны сейчас при этой схеме медиа выражения. Вы уменьшаете размер окна браузера и при этом уменьшается размер паттерна 1 янв 2020 в 15:32
  • @BlackStar1991 по-моему лучший вариант, все работает и без media запросов 1 янв 2020 в 15:42
  • @Alexandr_TT а возможно ли контролировать размер этого паттерна? *Я перепроверил, изменения действительно есть. В вашем примере 14 крыс и они вписаны во горизонталь в рамки экрана, постоянно, а в моём 19,5крыс для моего монитора. А можно ли добиться, скажем, что б для устройств с экраном <450px было 4 крысы? (*Всё условно, мне понять принцип) 1 янв 2020 в 17:58
  • @BlackStar1991 добавил описание и пример 1 янв 2020 в 19:54
4

Получилось решить так:

  • cгруппировать <path> тэгом <g> (если это не составной контур);

  • убрать атрибут viewBox;

  • задать width/height у <pattern> по размеру viewBox в данном случае 50 ;

  • задавать локальную переменную в CSS для значения свойства scale() в каждом @media запросе ( c width/height не получиться);

  • затем получить значение переменной в JS и ресайзить <pattern> через setAttribute()

var group = document.getElementById('group');
var message = document.getElementById('msg');
var pattern = document.getElementById('path404');

window.onload = resizepattern();
window.addEventListener('resize', resizepattern);

function resizepattern() {

  var st = window.getComputedStyle(group, null).getPropertyValue('--scale_1');

  message.textContent = st;
  pattern.setAttribute('width', 50 * st)
  pattern.setAttribute('height', 50 * st)

}
* {
  margin: 0;
  padding: 0;
}

body {
  position: absolute;
  height: 100%;
  width: 100%;
}

p {
  font-size: 50px;
  color: red;
  position: absolute;
}

#group {
  --scale_1: 1;
  transform: scale(var(--scale_1));
}

@media (max-width: 700px) {
  #group {
    --scale_1: 7;
    transform: scale(var(--scale_1));
  }
}
<p id="msg"></p>

<svg width="100%" height="100%">
        <defs>
       <pattern id="path404" x="0" y="0"  width="50" height="50"  patternUnits="userSpaceOnUse">
			 
			 <g id = "group">
              <path class="st0" d="M0 31.3h16.4v2.9H0z"/>
              <path class="st1" d="M33.4 31.3H50v2.9H33.4z"/>
              <path transform="rotate(-8.488 11.5788 38.36)" class="st0" d="M2.8 36.9h17.5v2.9H2.8z"/>
              <path transform="rotate(-81.553 38.4156 38.361)" class="st1" d="M37 29.6h2.9v17.5H37z"/>
              <path class="st2" d="M9.3 18.6C4.2 18.6 0 14.4 0 9.3S4.2 0 9.3 0s9.3 4.2 9.3 9.3c0 2.1-.7 4-1.9 5.6l-3.9 3c-1.1.4-2.3.7-3.5.7z"/>
              <path d="M40.7 18.6c-1.2 0-2.4-.2-3.5-.7l-3.9-3c-1.2-1.6-1.9-3.6-1.9-5.6 0-5.1 4.2-9.3 9.3-9.3S50 4.2 50 9.3s-4.2 9.3-9.3 9.3z" fill="#ffab15"/>
              <path d="M25 44.9L11.2 28.7c-2.6-3-3.2-7.2-1.5-10.9 1.7-3.7 5.3-6 9.3-6h12c4 0 7.6 2.3 9.3 6 1.7 3.7 1.1 7.9-1.5 10.9L25 44.9z" fill="#ffea84"/>
              <path class="st2" d="M40.3 17.8c-1.7-3.7-5.3-6-9.3-6h-6v33.1l13.8-16.2c2.6-3 3.2-7.2 1.5-10.9z"/><path d="M25 50c-1.6 0-2.9-1.3-2.9-2.9s1.3-2.9 2.9-2.9 2.9 1.3 2.9 2.9S26.6 50 25 50z" fill="#bf6015"/><circle class="st6" cx="20.1" cy="23" r="2"/>
              <circle cx="29.9" cy="23" r="2" fill="#713708"/><path class="st6" d="M25 44.1V50c1.6 0 2.9-1.3 2.9-2.9s-1.3-3-2.9-3z"/>
							</g>
            </pattern>
        </defs>
        <rect x="0" y="0" width="100%" height="100%" fill="url(#path404)" />

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.