Блог

Главная - Вопросы по программированию - CSS сетка с элементами sqaure SVG

CSS сетка с элементами sqaure SVG

#html #css #svg #css-grid

#HTML #css #svg #css-сетка

Вопрос:

У меня возникла проблема с тем, чтобы ячейки сетки css всегда были квадратными, а внутри каждой — квадратный элемент SVG.

CSS сетка должна на 100% соответствовать родительскому контейнеру и сохранять прямоугольность при изменении размера браузера (до 60×60 пикселей).

Прямо сейчас у меня есть странное пустое пространство над и под элементами.

Это мой текущий стиль:

 <style>

        *{
            box-sizing: border-box;
        }

        .zubi{
            display: grid;
            grid-template: repeat(2, 1fr) / repeat(16, 1fr);
            gap: .6rem;
            margin: .6rem;
        }

        .zub{
            border-radius: .3vw;

            width: 100%;
            
            --boja-zuba-unutra: white;
            --boja-zuba-spolja: currentColor;
        } 

    </style>

Я подготовил пример с использованием кода ручкой:https://codepen.io/bojanv55/pen/JjXGLXO

Есть идея? Спасибо.

Обновить

Хорошо, мне удалось это сделать. Мне просто нужно было удалить свойства viewBox из элементов и переместить его в то место, где я фактически включаю элементы svg (в данном случае element). Я также обновил код-перо.

Ответ №1:

Я закомментировал эти 2 строки:

 gap: .6rem;
margin: .6rem;

Дает ли это ожидаемый результат?

Редактировать: я заменил 1fr ссылки на 60px здесь:

 grid-template: repeat(2, 60px) / repeat(16, 60px);

и также дала .zub высоту 100%:

 .zub {
      border-radius: .3vw;
      width: 100%;
      height: 100%;
      --boja-zuba-unutra: white;
      --boja-zuba-spolja: currentColor;
    }

Основным виновником был 1fr (единица дроби 1). Подробнее об этом смотрите здесь:
дробная единица 

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ll</title>
  <style>
    * {
      box-sizing: border-box;
    }
    
    .zubi {
      display: grid;
      grid-template: repeat(2, 60px) / repeat(16, 60px);
      /*gap: .6rem;*/
      /*margin: .6rem;*/
    }
    
    .zub {
      border-radius: .3vw;
      width: 100%;
      height: 100%;
      --boja-zuba-unutra: white;
      --boja-zuba-spolja: currentColor;
    }
  </style>

  <svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="zub-5-zona" viewBox="0 0 120 120" fill="white" style="fill: var(--boja-zuba-unutra, white)">
        <rect width="120" height="120" fill="black" style="fill: var(--boja-zuba-spolja, black)"/>
        <path class="gore" d="M 6.8,4 L 113.2,4 79.2,38 40.8,38"/>
        <path class="desno" d="M 116,6.8 L 116,113.2 82,79.2 82,40.8 116,6.8"/>
        <path class="dole" d="M 6.8,116 L 113.2,116 79.2,82 40.8,82 6.8,116"/>
        <path class="lijevo" d="M 4,6.8 L 38,40.8 38,79.2 4,113.2 4,6.8"/>
        <path class="centar" d="M 42,42 L 78,42 78,78 42,78 42,42"/>
    </symbol>
    <symbol id="zub-4-zone" viewBox="0 0 120 120" fill="white" style="fill: var(--boja-zuba-unutra, white)">
        <rect width="120" height="120" fill="black" style="fill: var(--boja-zuba-spolja, black)"/>
        <path class="gore" d="M 6.8,4 L 113.2,4 79.2,58 40.8,58" />
        <path class="desno" d="M 116,6.8 L 116,113.2 82.4,60 116,6.8" />
        <path class="dole" d="M 6.8,116 L 113.2,116 78.8,62 41.08,62 6.8,116" />
        <path class="lijevo" d="M 4,6.8 L 37.6,60 4,113.2 4,6.8" />
    </symbol>
</svg>
</head>

<body>

  <div class="zubi">
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>

    <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
    <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
    <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
    <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
    <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
    <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>

    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>

    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>

    <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
    <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
    <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
    <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
    <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
    <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>

    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
  </div>

</body>

</html>

Попробуйте эту «адаптивную» версию, чтобы убедиться, что мы на правильном пути. Возможно, потребуется немного больше работы:

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ll</title>
    <style>

        *{
            box-sizing: border-box;
        }

        .zubi{
            display: grid;
            grid-template: repeat(2, 50%) / repeat(16, 6.25%);
            /*gap: .6rem;
            margin: .6rem;*/
        }

        .zub{
            border-radius: .3vw;

            width: 100%;
            --boja-zuba-unutra: white;
            --boja-zuba-spolja: currentColor;
        } 

    </style>
    
    <svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="zub-5-zona" viewBox="0 0 120 120" fill="white" style="fill: var(--boja-zuba-unutra, white)">
        <rect width="120" height="120" fill="black" style="fill: var(--boja-zuba-spolja, black)"/>
        <path class="gore" d="M 6.8,4 L 113.2,4 79.2,38 40.8,38"/>
        <path class="desno" d="M 116,6.8 L 116,113.2 82,79.2 82,40.8 116,6.8"/>
        <path class="dole" d="M 6.8,116 L 113.2,116 79.2,82 40.8,82 6.8,116"/>
        <path class="lijevo" d="M 4,6.8 L 38,40.8 38,79.2 4,113.2 4,6.8"/>
        <path class="centar" d="M 42,42 L 78,42 78,78 42,78 42,42"/>
    </symbol>
    <symbol id="zub-4-zone" viewBox="0 0 120 120" fill="white" style="fill: var(--boja-zuba-unutra, white)">
        <rect width="120" height="120" fill="black" style="fill: var(--boja-zuba-spolja, black)"/>
        <path class="gore" d="M 6.8,4 L 113.2,4 79.2,58 40.8,58" />
        <path class="desno" d="M 116,6.8 L 116,113.2 82.4,60 116,6.8" />
        <path class="dole" d="M 6.8,116 L 113.2,116 78.8,62 41.08,62 6.8,116" />
        <path class="lijevo" d="M 4,6.8 L 37.6,60 4,113.2 4,6.8" />
    </symbol>
</svg>
</head>
<body>

    <div class="zubi">
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>

        <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
        <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
        <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
        <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
        <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
        <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>

        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>

        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>

        <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
        <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
        <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
        <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
        <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
        <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>

        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    </div>

</body>
</html>

Комментарии:

1. нет, ячейки сетки по-прежнему имеют высоту 150 пикселей. и не квадратная.

2. да, но теперь это исправлено с помощью родительского контейнера и не настраивается на 100%. Итак, мне нужно, чтобы ширина родительского элемента составляла 100%, а SVGS — для настройки на эту ширину высоту (в зависимости от того, что это) и сетка для сохранения квадратных пропорций.

3. @BojanVukasovic — Попробуйте второй фрагмент. Она отзывчива, поэтому я думаю, что мы приближаемся.

4. Спасибо. Мне только что удалось решить эту проблему. Мне нужно было переместить viewBox из элементов <symbol> в элементы <svg>. Теперь ее ширина и высота составляют 100%.