css - 如何在不给它(或其父级)明确高度的情况下防止内联 SVG 以任意高度显示？-6ren

css - 如何在不给它(或其父级)明确高度的情况下防止内联 SVG 以任意高度显示？

转载作者：太空宇宙更新时间：2023-11-04 07:04:14

下面是一个使用 Bootstrap 3 的简化布局。该行的中间列包含一个内联 SVG，它提供了从蓝色框到绿色框的排序过渡。

我为什么要这样做？使用浏览器 CSS 设计 SVG 样式很酷!此外，这样做意味着我不必为我可能应用此设计元素的每个可能的行高和颜色组合生成一堆 PNG。

虽然我可以使用 JS 根据最高的不包含 SVG 的 div 动态设置 col-* div 的高度，但似乎应该有一种方法可以使用 CSS 来做到这一点。

请注意，我已尝试为 .row 元素设置 display: flex(它是在样式表中注释掉)。虽然它确实确保列具有相同的高度，但它具有增加内容 div 而不是缩小样式 div 的效果。

这Plunker包括在内，以防您像我一样发现它比 StackOverflow 片段更容易使用。

html, body.stackoverflow-snippet {
  color: white;
  font-size: 25px;
  height: 100%;
}

.row {
  /*
   * Ultimately I would use the following rule to ensure the columns are equal
   * height, since their content is dynamic, but the problem is less obvious
   * when this rule is in effect.
   */
  /* display: flex; */
}

.row.desired-result div {
  /*
   * To see the desired effect, set the height to any known value. In my case, I
   * can't set the height of the divs explicitly the because user-generated
   * content populates these divs and may change their height.
   */
  height: 35px;
}

.row .rounded {
  padding-left: 0;
}

.blue {
  background: blue;
}

.green {
  background: green;
}

svg {
  height: 100%;
}

svg circle {
  fill: blue;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body class="stackoverflow-snippet">
  <div class="container-fluid">
    <!-- first row: desired result -->
    <div class="row desired-result">
      <div class="blue col-xs-6">Desired result</div>
      <div class="green rounded col-xs-1">
        <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="inline-svg inlined-svg" viewBox="90 20 10 60" role="img">
          <circle r="50" cy="50" cx="50"></circle>
        </svg>
      </div>
      <div class="green col-xs-5">(explicit height)</div>
    </div>
    <!-- second row: just a visual break to separate the rows of interest -->
    <div class="row">
      <div class="col-xs-12">&nbsp;</div>
    </div>
    <!-- third row: natural height -->
    <div class="row">
      <div class="blue col-xs-6">Ack!</div>
      <div class="green rounded col-xs-1">
        <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="inline-svg inlined-svg" viewBox="90 20 10 60" role="img">
          <circle r="50" cy="50" cx="50"></circle>
        </svg>
      </div>
      <div class="green col-xs-5">(natural height)</div>
    </div>
  </div>
</body>

</html>

最佳答案

使 SVG position: absolute。然后将根据其父容器测量“100%”高度。只要你还记得将父单元格设置为position: relative，使其成为合适的包含 block 。

.svg-container {
  position: relative;
}

.inline-svg {
  position: absolute;
  left: 0;
}

我们还向 SVG 单元格添加了一个不间断空间，以防止在您将 SVG 设为绝对时它折叠到零高度。

.svg-container::before {
  content: '\a0'
}

结果:

html, body.stackoverflow-snippet {
  color: white;
  font-size: 25px;
  height: 100%;
}

.row {
  /*
   * Ultimately I would use the following rule to ensure the columns are equal
   * height, since their content is dynamic, but the problem is less obvious
   * when this rule is in effect.
   */
  /* display: flex; */
}

.row.desired-result div {
  /*
   * To see the desired effect, set the height to any known value. In my case, I
   * can't set the height of the divs explicitly the because user-generated
   * content populates these divs and may change their height.
   */
  height: 35px;
}

.row .rounded {
  padding-left: 0;
}

.blue {
  background: blue;
}

.green {
  background: green;
}

svg {
  height: 100%;
}

svg circle {
  fill: blue;
}

.svg-container {
  position: relative;
}

.svg-container::before {
  content: '\a0'
}

.inline-svg {
  position: absolute;
  left: 0;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body class="stackoverflow-snippet">
  <div class="container-fluid">
    <!-- first row: desired result -->
    <div class="row desired-result">
      <div class="blue col-xs-6">Desired result</div>
      <div class="green rounded col-xs-1">
        <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="inline-svg inlined-svg" viewBox="90 20 10 60" role="img">
          <circle r="50" cy="50" cx="50"></circle>
        </svg>
      </div>
      <div class="green col-xs-5">(explicit height)</div>
    </div>
    <!-- second row: just a visual break to separate the rows of interest -->
    <div class="row">
      <div class="col-xs-12">&nbsp;</div>
    </div>
    <!-- third row: natural height -->
    <div class="row">
      <div class="blue col-xs-6">Ack!</div>
      <div class="green rounded col-xs-1 svg-container">
        <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="inline-svg inlined-svg" viewBox="90 20 10 60" role="img">
          <circle r="50" cy="50" cx="50"></circle>
        </svg>
      </div>
      <div class="green col-xs-5 svg-container">
        (natural height)</div>
    </div>
  </div>
</body>

</html>

关于css - 如何在不给它(或其父级)明确高度的情况下防止内联 SVG 以任意高度显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51755453/

文章推荐： Java——KeyPressed 事件后立即调用 KeyReleased

文章推荐： python - 从 Python 列表中获取字符串？

明确 Windows 中的权限
我在 linux 上工作。我对windows没有太多想法。 windows中文件的权限是如何组织的？我们在unix中是否有像chmod这样的api来更改权限？最佳答案对于 Windows，有一个名
api - 明确 API 的含义
应用程序编程接口(interface) (API) 是一组用于访问基于 Web 的软件应用程序的编程指令和标准。如果出现，有人可以向我解释一下吗？谷歌地图或优酷这是API哪个是softwar
android - 如何使隐含的 Intent 明确？
我有两个应用程序，A 和 B，它们使用 android 库 C。B 有一个服务 A 想通过 C 使用，例如在我的库中有一个类试图将它绑定(bind)到服务，
java - 明确 Intent 操作默认值
我正在正常或安全模式下启动相机应用程序，具体取决于使用我的应用程序执行的手势，但一旦用户选择应用程序并点击始终，则没有选项可以更改默认值，即使是从 Android 的设置菜单中也是如此. camera
python:我可以在不(明确)使用整数索引的情况下获得稀疏矩阵表示吗？
我有一个数据集，本质上是一个稀疏二进制矩阵，表示两个集合的元素之间的关系。例如，让第一组是人(用他们的名字表示)，例如像这样的东西: people = set(['john','jane','mike
让你的python代码更加pythonic(简练、明确、优雅)
何为pythonic? pythonic如果翻译成中文的话就是很python。很+名词结构的用法在中国不少，比如：很娘，很国足，很CCTV等等。我的理解为，很+名词表达了一种特殊和强调的意味。
prolog - 明确 Prolog 目标的 "deterministic success"
某些 Prolog 目标的确定性成功问题已经一次又一次地出现在 - 至少 - 以下问题: Reification of term equality/inequality Intersection an
c# - DateTime.TryParse 可以(明确)识别哪些格式？
我指的是 DateTime.TryParse(string s, out DateTime result) 重载，它尝试从字符串中解析 DateTime - 没有特定的格式正在指定。我可以从http
《数据资产》专题：《数据资产、数据权属、数据产权》如何估值、明确、保护？
2020 年 04 月 10 日，《中共中央国务院关于构建更加完善的要素市场化配置体制机制的意见》正式公布，将数据确立为五大生产要素（土地、资本、劳动力以及技术）之
ios - 明确 NSNotification 的 addObserver 函数中 notificationSender 的用途
有人可以解释一下 NSNotification 的 addObserver 函数中 notificationSender 的用途吗？这是 Apple 文档的解释: notificationSende

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 如何在不给它(或其父级)明确高度的情况下防止内联 SVG 以任意高度显示？