#html #css #svg #css-grid
Вопрос:
Я использую CSS-сетку, которая отлично работает, но хочу иметь фоновый SVG, поверх которого расположена сетка.
Например, вот HTML:
<div className="wrapper">
<div className="item">
<div id="wave">
<svg viewBox="0 0 500 200" preserveAspectRatio="none"><path d="M0.00,92.27 C216.83,192.92 304.30,8.39 500.00,109.03 L500.00,0.00 L0.00,0.00 Z"></path></svg>
</div>
</div>
<div className="item">1</div>
<div className="item">2</div>
<div className="item">3</div>
</div>
…и CSS:
.wrapper {
display: grid;
grid-template-rows: 100px 100px 100px 100px;
grid-template-columns: 100vw;
gap: 10px;
width: 100vw;
height: auto;
}
.item {
background: rgba(0, 0, 0, 0.5);
}
…что, очевидно, помещает SVG только в верхний ряд. Как я могу разместить SVG за сеткой? Я также попытался обернуть обертку с помощью div и увидеть абсолютное положение.
Должно выглядеть так (svg — волна синего цвета, элементы сетки розового цвета):
Ответ №1:
Использование подхода обертки:
- Создайте элемент оболочки с
position: relative
помощью . - Добавьте
svg
элемент сposition: absolute
иtop: 0
,right: 0
, и т.д… - Добавьте элемент сетки с
position: relative
помощью .
Наличие оболочки position: relative
позволяет svg
изменять размер, используя оболочку в качестве ее родителя. В position: relative
сетке создается новый контекст укладки над тем svg
, который также имеет свой собственный контекст укладки благодаря position: absolute
.
Вот демо-версия:
.wrapper {
position: relative;
}
.wrapper svg {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
fill: lightblue;
}
.grid {
display: grid;
grid-template-rows: 100px 100px 100px 100px;
grid-template-columns: 100%;
border: 1px solid black;
gap: 10px;
position: relative;
}
.item {
background-color: rgba(0, 0, 0, 0.5);
}
<div class="wrapper">
<svg viewBox="0 0 500 200" preserveAspectRatio="none">
<path d="M0.00,92.27 C216.83,192.92 304.30,8.39 500.00,109.03 L500.00,0.00 L0.00,0.00 Z"></path>
</svg>
<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</div>
Комментарии:
1. Красивые. Спасибо.
2. Или установите svg в фоновом режиме css
Ответ №2:
Намного меньше HTML и CSS, когда вы размещаете свой SVG в .grid background
Преобразуйте свой SVG в CSS в: https://yoksel.github.io/url-encoder/
Единственный недостаток: вы не можете стилизовать SVG с помощью CSS, вам нужно указать путь к fill
SVG с атрибутом.
.grid {
display: grid;
grid-template-rows: repeat(3,50px);
grid-template-columns: 100%;
border: 1px solid black;
gap: 10px;
background-image: url("data:image/svg xml,");
background-size: cover;
}
.item {
background-color: rgba(0, 0, 0, 0.5);
}
<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
Комментарии:
1. Я беспокоюсь, что если я преобразую SVG в изображение, загрузка займет слишком много времени, тем более что он покрывает весь фон div шириной в экран. SVG загружается мгновенно.
2. Это не двоичный образ. SVG по-прежнему остается SVG. И анализируется одним и тем же кодом глубоко в движке браузера перед вводом(или обновлением) в DOM. Это может быть быстрее (никогда не тестировалось), потому что CSS не применяется к версии SVG фонового изображения.. таким образом, браузерному движку приходится меньше работать над перерисовкой и перекраской.
3. интересно, спасибо.
4. Я использовал обертку, потому что в этом направлении уже шел вопрос. Если бы это был личный проект, я бы, скорее всего, использовал этот подход вместо этого. 1