Подскажите, пожалуйста, есть ли способ менять размеры изображения
патерна (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