时间戳

首页 > 解决方案 > 带有方形 SVG 元素的 CSS 网格

html - 带有方形 SVG 元素的 CSS 网格

问题描述

我在使 CSS 网格单元始终是方形的，并且每个单元格内部都有方形 SVG 元素时遇到了问题。

CSS 网格应 100% 适合父容器，并在浏览器调整大小时保持方形（最大 60x60 像素）。

现在，我在元素上方和下方都有奇怪的空白空间。

这是我现在的风格：

<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 元素的位置（在本例中为元素）。我也更新了代码笔。

标签： htmlcsssvgcss-grid

解决方案

我注释掉了这两行：

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>

推荐阅读