将 svg 元素拉伸到 flex 容器的全高

【问题标题】：Stretch a svg-element to full height of a flex container将 svg 元素拉伸到 flex 容器的全高
【发布时间】：2017-02-08 01:58:06
【问题描述】：

我有一个带有display: flex 的容器。在两个角落，一个 svg 元素应该伸展到容器的整个高度。容器的高度取决于元素中有多少文本。

在 FF 和 Chrome 中它运行完美，但 IE 使 svg 始终为 150px 高度。我不能给 svg 一个固定的大小，因为如果文本变成多行并且元素增长，它应该与元素一起拉伸。

我已经做了一个codepen here

.flag-header {
  display: flex;
  max-width: 80%;
  position: relative;
}

.flag-header__headline {
  background-color: #bf0b1c;
  padding: 10px 0;
  color: white;
  font: 900 24px/120% Verdana;
  text-transform: uppercase;
}

.flag-header__corner {
  width: 30px;
}

.flag-header__corner-shape {
  height: 100%;
  width: 30px;
  fill: #bf0b1c;
}
<div class="flag-header">
  <div class="flag-header__corner">
    <svg class="flag-header__corner-shape" id="Layer_1" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 22.11 30" preserveAspectRatio="none">
        <polygon class="cls-1" points="22.11 30 0 30 10 15 0 0 22.11 0 22.11 30"/>
            </svg>
  </div>
  <p class="flag-header__headline">sdfgsdgfsdgf sfasd fasdf asdfasdf</p>
  <div class="flag-header__corner">
    <svg class="flag-header__corner-shape" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.11 30" preserveAspectRatio="none">
            <polygon class="cls-1" points="0 30 22.11 30 12.11 15 22.11 0 0 0 0 30"/>
            </svg>
  </div>
</div>

【问题讨论】：

  • 从 Chrome v88.0.4324.182 开始，这似乎已被破坏。 svg 元素的高度不是可变文本高度的 100%。

标签： html css svg flexbox


【解决方案1】：

没有答案。充其量是一个黑客。对这种意外行为的更多观察。也许这是一个错误。

删除 svg 包装器并从 svg 中删除 height: 100% 具有相同的效果。 （更接近我正在尝试调试的布局。很高兴知道包装器 OP 开始时没有任何区别，我可以避免不必要的元素。）

.flag-header {
  display: flex;
  max-width: 80%;
  position: relative;
}

.flag-header__headline {
  background-color: #bf0b1c;
  padding: 10px 0;
  color: white;
  font: 900 24px/120% Verdana;
  text-transform: uppercase;
}

.flag-header__corner-shape {
  width: 30px;
  fill: #bf0b1c;
}
<div class="flag-header">
  <svg class="flag-header__corner-shape" id="Layer_1" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 22.11 30" preserveAspectRatio="none">
        <polygon class="cls-1" points="22.11 30 0 30 10 15 0 0 22.11 0 22.11 30"/>
            </svg>
  <p class="flag-header__headline">sdfgsdgfsdgf sfasd fasdf asdfasdf</p>
  <svg class="flag-header__corner-shape" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.11 30" preserveAspectRatio="none">
            <polygon class="cls-1" points="0 30 22.11 30 12.11 15 22.11 0 0 0 0 30"/>
            </svg>
</div>

通过在可变元素和 svg 元素上将可变高度元素的 padding 与负 margins 反转来进行破解。

.flag-header {
  display: flex;
  max-width: 80%;
  position: relative;
  border: 1px solid black;
}

.flag-header__headline {
  background-color: #bf0b1c;
  padding: 10px 0;
  margin: -10px 0;
  color: white;
  font: 900 24px/120% Verdana;
  text-transform: uppercase;
}

.flag-header__corner-shape {
  width: 30px;
  fill: #bf0b1c;
  margin: -10px 0;
}
<div class="flag-header">
  <svg class="flag-header__corner-shape" id="Layer_1" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 22.11 30" preserveAspectRatio="none">
        <polygon class="cls-1" points="22.11 30 0 30 10 15 0 0 22.11 0 22.11 30"/>
            </svg>
  <p class="flag-header__headline">sdfgsdgfsdgf sfasd fasdf asdfasdf</p>
  <svg class="flag-header__corner-shape" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.11 30" preserveAspectRatio="none">
            <polygon class="cls-1" points="0 30 22.11 30 12.11 15 22.11 0 0 0 0 30"/>
            </svg>
</div>

如果没有任意的padding 和margins，黑客就会崩溃。这意味着这些属性本身都不会导致问题，也不能自己解决问题，但他们可以通过共同努力来相互否定来解决问题......

.flag-header {
  display: flex;
  max-width: 80%;
  position: relative;
  border: 1px solid black;
}

.flag-header__headline {
  background-color: #bf0b1c;
  color: white;
  font: 900 24px/120% Verdana;
  text-transform: uppercase;
}

.flag-header__corner-shape {
  width: 30px;
  fill: #bf0b1c;
}
<div class="flag-header">
  <svg class="flag-header__corner-shape" id="Layer_1" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 22.11 30" preserveAspectRatio="none">
        <polygon class="cls-1" points="22.11 30 0 30 10 15 0 0 22.11 0 22.11 30"/>
            </svg>
  <p class="flag-header__headline">sdfgsdgfsdgf sfasd fasdf asdfasdf</p>
  <svg class="flag-header__corner-shape" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.11 30" preserveAspectRatio="none">
            <polygon class="cls-1" points="0 30 22.11 30 12.11 15 22.11 0 0 0 0 30"/>
            </svg>
</div>

转换为grid 并不能解决任何问题。即使黑客停止工作。将 svg 元素中的 height 和 width 弄乱，会产生一些非常奇怪的结果。

.flag-header {
  display: grid;
  max-width: 80%;
  position: relative;
  grid-template-columns: 30px auto 30px;
  border: 1px solid black;
}

.flag-header__headline {
  background-color: #bf0b1c;
  padding: 10px 0;
  color: white;
  font: 900 24px/120% Verdana;
  text-transform: uppercase;
}

.flag-header__corner-shape {
  fill: #bf0b1c;
}
<div class="flag-header">
  <svg class="flag-header__corner-shape" id="Layer_1" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 22.11 30" preserveAspectRatio="none">
        <polygon class="cls-1" points="22.11 30 0 30 10 15 0 0 22.11 0 22.11 30"/>
            </svg>
  <p class="flag-header__headline">sdfgsdgfsdgf sfasd fasdf asdfasdf</p>
  <svg class="flag-header__corner-shape" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.11 30" preserveAspectRatio="none">
            <polygon class="cls-1" points="0 30 22.11 30 12.11 15 22.11 0 0 0 0 30"/>
            </svg>
</div>

转换为table 并不能解决任何问题。 svg 元素中的height 值无关紧要。移除高度有效果，虽然不是我们想要的。

.flag-header {
  display: flex;
  max-width: 80%;
  position: relative;
  border-collapse: collapse;
  border-spacing: 0;
}

td {
  padding: 0;
}

.flag-header__headline {
  background-color: #bf0b1c;
  padding: 10px 0;
  color: white;
  font: 900 24px/120% Verdana;
  text-transform: uppercase;
}

.flag-header__corner-shape {
  width: 30px;
  fill: #bf0b1c;
  height: 100%;
}
<table class="flag-header">
  <tbody>
    <tr>
      <td>
        <svg class="flag-header__corner-shape" id="Layer_1" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 22.11 30" preserveAspectRatio="none">
        <polygon class="cls-1" points="22.11 30 0 30 10 15 0 0 22.11 0 22.11 30"/>
            </svg>
      </td>
      <td>
        <p class="flag-header__headline">sdfgsdgfsdgf sfasd fasdf asdfasdf</p>
      </td>
      <td>
        <svg class="flag-header__corner-shape" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.11 30" preserveAspectRatio="none">
            <polygon class="cls-1" points="0 30 22.11 30 12.11 15 22.11 0 0 0 0 30"/>
            </td>
            </svg>
    </tr>
  </tbody>
</table>

转换为伪元素并不能解决问题。原始 SVG 的 base64 编码版本丢失了 CSS 样式。这可以通过引用 .svg 文件或内联 CSS 样式来解决。

感谢：https://stackoverflow.com/a/32046349/2578125

.flag-header {
  display: flex;
  max-width: 80%;
  position: relative;
}

.flag-header__headline {
  background-color: #bf0b1c;
  padding: 10px 0;
  color: white;
  font: 900 24px/120% Verdana;
  text-transform: uppercase;
}

.flag-header::before,
.flag-header::after {
  width: 30px;
  fill: #bf0b1c;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.11 30' preserveAspectRatio='none'%3E%3Cpolygon points='22.11 30 0 30 10 15 0 0 22.11 0 22.11 30'/%3E%3C/svg%3E");
}

.flag-header::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.11 30' preserveAspectRatio='none'%3E%3Cpolygon points='0 30 22.11 30 12.11 15 22.11 0 0 0 0 30'/%3E%3C/svg%3E");
}
<div class="flag-header">
  <p class="flag-header__headline">sdfgsdgfsdgf sfasd fasdf asdfasdf</p>
</div>

尝试将@Alexei Zababurin 的方法与 OP 的目标相结合。对 Alexei 来说如此天才般优雅的东西在这里变成了畸形的怪物……覆盖是显示某些内容的唯一方法。

好吧，在我完全失去理智之前，是时候让这条白鲸睡觉了。愿更聪明、更勇敢的人占上风。神速！

.flag-header {
  max-width: 80%;
  background-color: #bf0b1c;
  padding: 10px 0;
  color: white;
  font: 900 24px/120% Verdana;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin: 0 30px;
  overflow: initial;
}

.flag-header::before,
.flag-header::after {
  width: 30px;
  fill: #bf0b1c;
  display: inline-block;
  margin: 0 0 0 -100%;
  margin: 0 0 0 -30px;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.11 30' preserveAspectRatio='none'%3E%3Cpolygon points='22.11 30 0 30 10 15 0 0 22.11 0 22.11 30'/%3E%3C/svg%3E");
}

.flag-header::after {
  margin: 0 -100% 0 0;
  margin: 0 -30px 0 0;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.11 30' preserveAspectRatio='none'%3E%3Cpolygon points='0 30 22.11 30 12.11 15 22.11 0 0 0 0 30'/%3E%3C/svg%3E");
}
<div class="flag-header">sdfgsdgfsdgf sfasd fasdf asdfasdf
</div>

【讨论】：

    猜你喜欢
    • 2012-09-28
    • 2017-07-24
    • 2016-03-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-10-14
    • 2012-06-02
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    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