html - 使 SVG 图标获得 100% 的网格区域高度，而宽度服从纵横比

Question

目标

• SVG 图标的 ({) 高度必须始终填充紫色区域的高度，grid 布局的两行合并。
• 宽度必须根据图标的宽高比自动调整大小。

初始列表和 fiddle

🌎 Fiddle

<div class="Layout">
  <div class="TopLabel">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="BottomLabel">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
  <div class="IconSlot">
    <svg class="OpeningBracketLabel" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 20">
      <path d="M4.38 15.12c0-.7 0-1.24-.13-1.78a2.85 2.85 0 00-3-2.64l-.81-.11V9.38c0-.05.17-.12.27-.13.4 0 .82 0 1.22-.1A2.86 2.86 0 004.31 6.2c.05-.92 0-1.84.07-2.75A3.53 3.53 0 018 0h1.63a.35.35 0 01.23.06.35.35 0 01.09.26c0 .52 0 .76-.12.88s-.38.11-.85.11c-.26 0-.52 0-.78.05a2.2 2.2 0 00-2.1 2.28v2a4 4 0 01-2.51 4 .74.74 0 00-.22.1c-.07.06-.18.14-.18.2s.11.15.19.2c.4.25.82.45 1.19.72a3.79 3.79 0 011.53 3.19v2a2.33 2.33 0 002.52 2.57h1c.34 0 .32.09.33.34 0 1 0 1-.95 1a10.63 10.63 0 01-1.79-.13 3.39 3.39 0 01-2.8-3.24c-.06-.51-.03-1.07-.03-1.47z"></path>
    </svg>
  </div>
</div>

.Layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 6px;
}

.Layout + .Layout {
  margin-top: 12px;
}

.TopLabel {
 font-size: 14px;
 line-height: 18px;
 background: #BBDEFB;
}

.BottomLabel {
  font-size: 12px;
  line-height: 16px;
  background: #FFECB3;
  grid-row: 2;
}

.IconSlot {
  width: 20px;
  grid-row: span 2;
  order: 3;
  background: #E1BEE7;
}

.OpeningBracketLabel {
  width: 100%;
  height: 100%;
}

关于这个问题的一些思考

我想如果没有 SVG 图标的容器就无法达到目标(如果我错了请告诉我)。所以我添加了 .IconSlot。

只是

.OpeningBracketLabel { 
  height: 100%;
}

还不够——布局会停止:

我为 .IconSlot 临时添加了 width: 20px;:没有它，图标会占据太多位置:

Answer 1

您的问题的一个可能解决方案是使用更简单的路径:不是填充路径，而是笔画。现在您可以添加 preserveAspectRatio="none"到 svg 以便它可以拉伸(stretch)图像。现在的问题是，由于变形，笔画的笔画宽度会不规则。为了避免这个问题，你可以使用 vector-effect="non-scaling-stroke"为路径。

由于您想要干代码，您可以使用 <use> 来避免重复路径代码。元素第二次需要它。

.Layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 6px;
}

.Layout + .Layout {
  margin-top: 12px;
}

.TopLabel {
 font-size: 14px;
 line-height: 18px;
 background: #BBDEFB;
}

.BottomLabel {
  font-size: 12px;
  line-height: 16px;
  background: #FFECB3;
  grid-row: 2;
}

.IconSlot {
  width: 20px;
  grid-row: span 2;
  order: 3;
  background: #E1BEE7;
}

.OpeningBracketLabel {
  width: 100%;
  height: 100%;
}

<div class="Layout">
  <div class="TopLabel">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="BottomLabel">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
  <div class="IconSlot">
    <svg class="OpeningBracketLabel" preserveAspectRatio="none" viewBox="3 0 6 19">
      <path id="brac" d="M9.86 .8c-.26 0-.52 0-.78.05a2.2 2.2 0 00-2.1 2.28v2a4 4 0 01-2.51 4 .74.74 0 00-.22.1c-.07.06-.18.14-.18.2s.11.15.19.2c.4.25.82.45 1.19.72a3.79 3.79 0 011.53 3.19v2a2.33 2.33 0 002.52 2.57h.35" fill="none" stroke="black" stroke-width="2" vector-effect="non-scaling-stroke"></path>
    </svg>
  </div>
</div>

<div class="Layout">
  <div class="TopLabel">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="BottomLabel">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
   <div class="IconSlot">
    <svg class="OpeningBracketLabel" preserveAspectRatio="none"  viewBox="3 0 6 19">
     <use xlink:href="#brac"/>
    </svg>
  </div>
</div>