使用VH表示高度

Question

我希望能够将我的SVG图形适合我的div，方法是忽略aspectratio（适合屏幕）。但是，当我更改窗口宽度时，我的图表会从我的黄色框中移出。如何使用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

Answer 1

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

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

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

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;