使用 VH 表示的高度对框 SVG 进行响应式拟合

Posted 2023-03-06

【中文标题】使用 VH 表示的高度对框 SVG 进行响应式拟合

【英文标题】：Responsive fit to box SVG using VH expressed height

【发布时间】：2015-10-22 23:23:42

【问题描述】：

我希望能够以忽略纵横比（适合屏幕）的方式将我的 SVG 图表适合我的 div。但是，当我更改窗口宽度时，我的图表会超出我的黄色框。如何使用 vh 表示的 div 高度来纠正这种保持？

.svg-container 
  display: inline-block;
  position: relative;
  width: 100%;
  height: 60vh;
  /* aspect ratio */
  vertical-align: top;
  overflow: hidden;
  background-color: yellow;

.svg-content-responsive 
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 0;

.line 
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;

<div class="container-fluid" data-ng-swipe-left="showMenu.value = true" data-ng-swipe-disable-mouse="">
  <div aw-resolve-loader="" ui-view="main" class="view reveal-animation ng-scope">
    <div style="float: left" class="ng-scope"></div>
    <div class="ng-scope ng-isolate-scope">
      <div class="svg-container">
        <svg viewBox="0 0 800 600" preserveAspectRatio="none">
          <path class="line" d="M0,600L114.28571428571428,300L228.57142857142856,562.5L457.1428571428571,225L571.4285714285714,375L800,0"></path>
        </svg>
      </div>
    </div>
  </div>
</div>

这是我的小伙伴：http://plnkr.co/edit/Ea7AK6kkvAVf8KIsnZwQ

【参考方案1】：

问题是因为您在视口单元中仅将 height 分配给容器，而不是实际的 SVG 元素。因此，容器的height 始终保持响应（如60vh），但svg 元素的height 会根据width 和viewBox 设置而变化。由于容器元素上的overflow: hidden，这会导致部分 SVG 被剪裁。

您可以通过从容器中删除 overflow: hidden 并将 border 添加到 SVG 元素来验证上述内容。

要解决此问题，只需将以下 CSS 属性添加到您的 svg 元素。这将确保 SVG 始终与容器一样大。

svg 
  width: 100%;
  height: 100%;

.svg-container 
  display: inline-block;
  position: relative;
  width: 100%;
  height: 60vh;  /* aspect ratio */
  vertical-align: top;
  overflow: hidden;
  background-color: yellow;

svg 
  width: 100%;
  height: 100%;

.svg-content-responsive 
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 0;
  border: 1px solid;

.line 
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;

<div class="container-fluid" data-ng-swipe-left="showMenu.value = true" data-ng-swipe-disable-mouse="">
  <!-- uiView: main -->
  <div aw-resolve-loader="" ui-view="main" class="view reveal-animation ng-scope">
    <div style="float: left" class="ng-scope"></div>
    <div class="ng-scope ng-isolate-scope">
      <div class="svg-container">
        <svg viewBox="0 0 800 600" preserveAspectRatio="none">
          <path class="line" d="M0,600L114.28571428571428,300L228.57142857142856,562.5L457.1428571428571,225L571.4285714285714,375L800,0"></path>
          <!--rect x="50" y="200"   /-->
        </svg>
      </div>
    </div>
  </div>
</div>

---

另一个可能的选择是将父容器设置为display: block，然后将所需的尺寸直接设置为svg 元素。

.svg-container 
  display: block;
  position: relative;
  vertical-align: top;
  overflow: hidden;
  background-color: yellow;

svg
  width: 100%;
  height: 60vh; /* aspect ratio */  

.svg-container 
  display: block;
  position: relative;
  vertical-align: top;
  overflow: hidden;
  background-color: yellow;

.svg-content-responsive 
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 0;

svg 
  width: 100%;
  height: 60vh;  /* aspect ratio */

.line 
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;

<div class="container-fluid" data-ng-swipe-left="showMenu.value = true" data-ng-swipe-disable-mouse="">
  <!-- uiView: main -->
  <div aw-resolve-loader="" ui-view="main" class="view reveal-animation ng-scope">
    <div style="float: left" class="ng-scope"></div>
    <div class="ng-scope ng-isolate-scope">
      <div class="svg-container">
        <svg viewBox="0 0 800 600" preserveAspectRatio="none">
          <path class="line" d="M0,600L114.28571428571428,300L228.57142857142856,562.5L457.1428571428571,225L571.4285714285714,375L800,0"></path>
          <!--rect x="50" y="200"   /-->
        </svg>
      </div>
    </div>
  </div>
</div>