CSS Grid布局中SVG尺寸异常溢出、无法适配网格的问题求解

我在CSS Grid布局内设置SVG尺寸时遇到了问题。我对SVG了解有限，仅掌握从Illustrator创建导出SVG、以及通过color、fill、stroke等属性自定义SVG的方法。

我制作了一个示例方便大家理解问题：我希望将SVG的起点与line-1行对齐，SVG的终点与line-3行对齐，预期效果如下：

但实际运行时SVG不受我设置的网格尺寸约束，会出现溢出，实际效果如下：

我可以通过调整padding对齐元素，但我不希望网格适配SVG的尺寸，而是希望SVG适配网格尺寸。如果让网格跟随SVG大小拉伸，会导致三行文本之间的间距过大，不符合需求，效果如下：

问题代码 #

CSS代码 #

.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;
}

HTML代码 #

<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的宽度即可控制整体高度，实现预期效果。

修正后CSS代码 #

.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;
}

修正后HTML代码 #

<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>

内容的提问来源于stack exchange，提问作者Big_Boulard