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

【问题标题】：Make SVG icon get the 100% of grid area height and while width obeys to aspect ratio使 SVG 图标获得 100% 的网格区域高度，而宽度服从纵横比
【发布时间】：2021-06-07 03:24:53
【问题描述】：

目标

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

初始列表和小提琴

???? 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;：没有它，图标会占据太多位置：

【问题讨论】：

    标签： html css svg


    【解决方案1】：

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

    由于您想要一个干代码，您可以避免在第二次需要时使用&lt;use&gt; 元素重复路径代码。

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

    【讨论】：

      【解决方案2】：

      您可以在 svg 中添加 position:absolute 并从父 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 {
  position: relative;
  width: 50px;
  grid-row: span 2;
  order: 3;

}

.OpeningBracketLabel {
  position: absolute;
  height: 100%;
    background: #E1BEE7;
}
      <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>

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

      【讨论】：

      • 感谢您的解决方案。我很高兴我不再需要为 svg 的父级指定固定宽度。不幸的是，您仍然指定它的代码，如果要删除，主体将溢出。此外，.IconsSlot 将变为 0 宽度的 div，但它必须具有我的宽度作为图标。你能解决它吗？
      • 如果你想将最大宽度设置为IconSlot，你可以做什么，你将该值设置为宽度，它应该可以解决问题
      • 很抱歉，我没有看到max-width 的IconSlot 改变了什么。
      猜你喜欢
      • 2017-09-22
      • 2017-02-24
      • 2018-06-21
      • 1970-01-01
      • 2011-12-24
      • 2019-12-03
      • 1970-01-01
      • 2013-08-26
      • 2018-12-18
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode