使用引导容器类将 svg 的高度设置为父 div答案

【问题标题】：set height of svg to parent div using bootstrap container class使用引导容器类将 svg 的高度设置为父 div
【发布时间】：2022-01-04 07:52:48
【问题描述】：

我想将 svg 高度调整为可以正常工作的父 div 容器

svg {
    height: 100%;
    width: 100%;  
  }

我使用引导程序 .container 类作为外部容器我不想覆盖引导容器类，所以我使用了一个带有 svg 的内部 div

将内部 div 设置为

 min-height: 20rem;

调整引导容器，但 svg 没有跨越到内部 div 容器的高度

如何将 svg 高度调整为内部 div 高度？

svg {
    height: 100%;
    width: 100%;
    background-color: blueviolet;
   
   
  }
  

  .svg-container {
    min-height: 20rem;
    background-color: rgb(211, 201, 219);
    border: solid black 6px;
  }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"
    />


  
    <title>Boostrap-sample-project</title>
  </head>
  <body>

    <div class="container">

      <div class="svg-container">
        <svg></svg>
      </div>
    </div>
    <!--  -->
 
  </body>
</html>

【问题讨论】：

给 svg 一个高度。在这一刻，你只有一个最小高度。 svg 元素的默认高度是 150px，如果你没有声明容器的高度，你会得到 150px

标签： html css svg bootstrap-4

【解决方案1】：

您可以在 svg 上使用 h-100 w-100。 SVG 应该具有百分比尺寸，即可扩展。并在 svg 上设置 inline min-height。

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />
  <title>Boostrap-sample-project</title>
</head>
<body>

  <div class="container border border-5 border-dark bg-info">
    <svg class="h-100 w-100" style="min-height:20rem">
       <rect width="100%" height="100%" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
  Sorry, your browser does not support inline SVG.  
    </svg>
  </div>

</body>
</html>

【讨论】：