SVG 在 CSS Grid 中的大小不正确答案

【问题标题】：SVG not sized properly in CSS GridSVG 在 CSS Grid 中的大小不正确
【发布时间】：2021-12-05 11:51:04
【问题描述】：

我在调整网格内的 SVG 大小时遇到问题。我对 SVG 不太了解（除了如何创建它们并从 illustrator 中导出它们，我们可以通过使用颜色、填充、描边等属性来自定义它们）

我制作了一支笔来让这更容易理解。我只想将起点与 line-1 对齐，将 SVG 的终点与 line-2 对齐，如下所示

如您所见，SVG 不太关心我为网格设置的大小是否溢出。

截图在这里：

我们可以使用填充来对齐，但我不想让网格适应 SVG 大小，但相反。显然我不希望得到类似下面的结果，因为 SVG 太长并且 3 行之间的距离太大。

.container {
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0em 0px;
  grid-auto-flow: row;
  grid-template-areas: "svg-icon line-1" "svg-icon line-2" "svg-icon line-3";
  width: 10rem;
  height: 6rem;
}

.line-1 {
  grid-area: line-1;
  font-size: 1.25em;
}

.line-2 {
  grid-area: line-2;
  font-size: 1em;
}

.line-3 {
  grid-area: line-3;
  font-size: 1.25em;
}

.svg-icon {
  grid-area: svg-icon;
}

<div class="container">
  <div class="line-1">This is the line 1</div>
  <div class="line-2">This is the line 2</div>
  <div class="line-3">This is the line 3</div>
  <div class="svg-icon">
    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.24 41.91"><path
        d="M2.63.5A2.12,2.12,0,1,1,.5,2.62,2.12,2.12,0,0,1,2.63.5h0m0-.5A2.62,2.62,0,1,0,5.25,2.62,2.62,2.62,0,0,0,2.63,0Z"
        transform="translate(-0.01)"
        fill="#fff"
      /><path
        d="M2.63.5A2.12,2.12,0,1,1,.5,2.62,2.12,2.12,0,0,1,2.63.5h0m0-.5A2.62,2.62,0,1,0,5.25,2.62,2.62,2.62,0,0,0,2.63,0Z"
        transform="translate(-0.01)"
      /><path
        d="M2.63,37.17A2.12,2.12,0,1,1,.5,39.29a2.12,2.12,0,0,1,2.13-2.12h0m0-.5a2.62,2.62,0,1,0,2.62,2.62h0A2.62,2.62,0,0,0,2.63,36.67Z"
        transform="translate(-0.01)"
        fill="#fff"
      /><path
        d="M2.63,37.17A2.12,2.12,0,1,1,.5,39.29a2.12,2.12,0,0,1,2.13-2.12h0m0-.5a2.62,2.62,0,1,0,2.62,2.62h0A2.62,2.62,0,0,0,2.63,36.67Z"
        transform="translate(-0.01)"
      /><line
        x1="2.61"
        y1="4.87"
        x2="2.61"
        y2="37.14"
        fill="none"
        stroke="#000"
        stroke-miterlimit="10"
        stroke-width="2"
      />
      <circle cx="2.61" cy="2.62" r="2.12" fill="#fff" /><circle
        cx="2.62"
        cy="39.29"
        r="2.12"
        fill="#fff"
      />
    </svg>
  </div>
</div>

非常感谢您的帮助。

解决方案

我们不能在网格上设置高度，因为网格的高度本质上是由 SVG 元素的宽度决定的。所以我想我们只需要删除网格上的高度，然后调整 SVG 的宽度，然后尝试获得所需的整个高度。

.container {
  display: grid;
  height: 400px;
  grid-template-areas: "svg-icon line-1" "svg-icon line-2" "svg-icon line-3";
  grid-template-columns: 4rem;
}

.svg-icon svg {
  width: 3rem;
  height: 100%;
}

.line-1 {
  grid-area: line-1;
  font-size: 2em;
  margin-top: 0.8rem;
  align-self:start;
}

.line-2 {
  grid-area: line-2;
  font-size: 1em;
  align-self:center;
}

.line-3 {
  grid-area: line-3;
  font-size: 2em;
  align-self:end;
  margin-bottom: 0.8rem;
}

.svg-icon {
  grid-area: svg-icon;
  justify-self: center;
}



.my-block {
  border: solid red 1px;
  padding: 0.25rem;
}

.container div {
  border: 1px solid lime;
}

<div class="my-block">
  <div class="container">
    <div class="line-1">This is the line 1</div>
    <div class="line-2">This is the line 2</div>
    <div class="line-3">This is the line 3</div>
    <div class="svg-icon">
      <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.24 41.91"><path
        d="M2.63.5A2.12,2.12,0,1,1,.5,2.62,2.12,2.12,0,0,1,2.63.5h0m0-.5A2.62,2.62,0,1,0,5.25,2.62,2.62,2.62,0,0,0,2.63,0Z"
        transform="translate(-0.01)"
        fill="#fff"
      /><path
        d="M2.63.5A2.12,2.12,0,1,1,.5,2.62,2.12,2.12,0,0,1,2.63.5h0m0-.5A2.62,2.62,0,1,0,5.25,2.62,2.62,2.62,0,0,0,2.63,0Z"
        transform="translate(-0.01)"
      /><path
        d="M2.63,37.17A2.12,2.12,0,1,1,.5,39.29a2.12,2.12,0,0,1,2.13-2.12h0m0-.5a2.62,2.62,0,1,0,2.62,2.62h0A2.62,2.62,0,0,0,2.63,36.67Z"
        transform="translate(-0.01)"
        fill="#fff"
      /><path
        d="M2.63,37.17A2.12,2.12,0,1,1,.5,39.29a2.12,2.12,0,0,1,2.13-2.12h0m0-.5a2.62,2.62,0,1,0,2.62,2.62h0A2.62,2.62,0,0,0,2.63,36.67Z"
        transform="translate(-0.01)"
      /><line
        x1="2.61"
        y1="4.87"
        x2="2.61"
        y2="37.14"
        fill="none"
        stroke="#000"
        stroke-miterlimit="10"
        stroke-width="2"
      />
      <circle cx="2.61" cy="2.62" r="2.12" fill="#fff" /><circle
        cx="2.62"
        cy="39.29"
        r="2.12"
        fill="#fff"
      />
    </svg>
    </div>
  </div>
</div>

【问题讨论】：

“很明显，我不想得到像下面这样的结果，因为 3 行之间的距离太大”——如果你清楚地说出你想要什么而不是你不想要什么，这会有所帮助。
我刚刚在“我只想将起点与第 1 行对齐，将 SVG 的终点与第 2 行对齐”旁边添加了一个屏幕截图，这样您就可以看到与最后一张截图

标签： css svg

【解决方案1】：

通常，当您遇到 css 问题时，您可以删除一些内容来解决问题 - 在这里添加更多并不总是“更多”。所以我们可以删除

  grid-template-columns: 1fr 5fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0em 0px;
  grid-auto-flow: row;

仍然很大，但这是您选择的宽度和高度。

.my-block {
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 25rem auto;
  /* remove the auto to get the trees below for example */
}

.container {
  grid-row: 1;
  grid-column: 1;
  display: grid;
  grid-template-areas: "svg-icon line-1" "svg-icon line-2" "svg-icon line-3";
  grid-template-columns: 4rem auto;
}

.line-1 {
  grid-area: line-1;
  font-size: 2em;
}

.line-2 {
  grid-area: line-2;
  font-size: 1em;
}

.line-3 {
  grid-area: line-3;
  font-size: 2em;
}

.svg-icon {
  grid-area: svg-icon;
  justify-self: center;
}

.svg-icon svg {
  width: 2rem;
  height: 100%;
}

.my-block {
  border: solid red 1px;
  padding: 0.25rem;
}

.container div {
  border: 1px solid lime;
}

<div class="my-block">
  <div class="container">
    <div class="line-1">This is the line 1</div>
    <div class="line-2">This is the line 2</div>
    <div class="line-3">This is the line 3</div>
    <div class="svg-icon">
      <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.24 41.91"><path
        d="M2.63.5A2.12,2.12,0,1,1,.5,2.62,2.12,2.12,0,0,1,2.63.5h0m0-.5A2.62,2.62,0,1,0,5.25,2.62,2.62,2.62,0,0,0,2.63,0Z"
        transform="translate(-0.01)"
        fill="#fff"
      /><path
        d="M2.63.5A2.12,2.12,0,1,1,.5,2.62,2.12,2.12,0,0,1,2.63.5h0m0-.5A2.62,2.62,0,1,0,5.25,2.62,2.62,2.62,0,0,0,2.63,0Z"
        transform="translate(-0.01)"
      /><path
        d="M2.63,37.17A2.12,2.12,0,1,1,.5,39.29a2.12,2.12,0,0,1,2.13-2.12h0m0-.5a2.62,2.62,0,1,0,2.62,2.62h0A2.62,2.62,0,0,0,2.63,36.67Z"
        transform="translate(-0.01)"
        fill="#fff"
      /><path
        d="M2.63,37.17A2.12,2.12,0,1,1,.5,39.29a2.12,2.12,0,0,1,2.13-2.12h0m0-.5a2.62,2.62,0,1,0,2.62,2.62h0A2.62,2.62,0,0,0,2.63,36.67Z"
        transform="translate(-0.01)"
      /><line
        x1="2.61"
        y1="4.87"
        x2="2.61"
        y2="37.14"
        fill="none"
        stroke="#000"
        stroke-miterlimit="10"
        stroke-width="2"
      />
      <circle cx="2.61" cy="2.62" r="2.12" fill="#fff" /><circle
        cx="2.62"
        cy="39.29"
        r="2.12"
        fill="#fff"
      />
    </svg>
    </div>
  </div>
  <div>I have more happy trees than you</div>
</div>

【讨论】：

嗨，马克。感谢你的回复。你是对的，我弄错了容器的宽度和高度太大了，我已经更改了代码以获得 10rem x 6rem 的容器；显然，我可以使用第 1 行和第 3 行的填充来使它们与 SVG 对齐，但这与我想要得到的相反：SVG 适应网格大小，因此适应线条大小。我也有使用固定大小容器的限制。
不是 100% 确定你所说的我使用固定大小的容器是什么意思 - 所以我在容器周围添加了一个包装器来说明一些基础 - 并对 @ 做了一些小格式987654324@ 显示如何做到这一点。您可能可以在此基础上进行构建。
我注意到你删除了：“width: 10rem; height: 6rem;”从网格。我只需要这个网格的固定大小。
如果我以您的为例并在 3 行（开始中心结束）上添加 align-self，那么它就可以工作。所以如果我想要一个 6rem 高度的网格，我只需要使用 SVG 的宽度。这是处理这类事情的“经典”/“好”方式吗？
@Big_Boulard grid 显示可以用于大小的任何一种方式（内容确定大小或容器确定块的边界/大小。内容对齐可以在任一级别完成或覆盖通过特定的“块”。我发现体面的 CSS 的关键是尽可能多地删除以获得所需的结果