使用 VH 表示的高度响应框 SVG

Question

我希望能够以忽略纵横比（适合屏幕）的方式将我的 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>

这是我的 plunker：http ://plnkr.co/edit/Ea7AK6kkvAVf8KIsnZwQ

Answer 1

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

您可以通过overflow: hidden从容器中删除并将 a 添加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" width="250" height="40" /-->
        </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" width="250" height="40" /-->
        </svg>
      </div>
    </div>
  </div>
</div>