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

Question

目标

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

初始上市和小提琴

小提琴

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

还不够——布局会刹车：

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

标签： htmlcsssvg

Answer 1

解决您的问题的一种可能的方法是使用更简单的路径：不是填充路径，而只是描边。现在您可以添加preserveAspectRatio="none"到 svg 以便它可以拉伸图像。现在的问题是，由于变形，笔画的笔画宽度会不规则。为了避免问题，您可以使用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>