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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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