Question

我做了以下小提琴来说明我的问题：

HTML

<div class="main">
  <div class="chartWrapper">
    <div class="emptyExample">
      <svg fill="none" stroke="none" stroke-width="1.5" unselectable="on" preserveAspectRatio="xMidYMid meet" viewBox="0 0 180 380" height="100%" width="100%">
        <line x1="0" y1="0" x2="40" y2="400" style="stroke:rgb(255,0,0);stroke-width:2" />
      </svg>
    </div>
  </div>
</div>

CSS

.main
{
  height: 400px;
  width: 400px;
  background-color: yellow;
  padding: 5px;
}

.chartWrapper
{
  height: 100%;
  width: 100%;
  background-color: grey;
  overflow-y: scroll;
}

我是从当前项目中建立起来的，我希望svg可以在高度上滚动。根据我的理解，在父节点和SVG上的viewBox上设置当前高度和宽度时，应该没有滚动。当制作.main较小时，应该需要滚动。我的错误在哪里？我想在svg如何运作方面，这只是我方面的一些误解......

Answer 1

你应该知道一些事情：
1.那里没有必要的空例。

<div class="main">
  <div class="chartWrapper">

      <svg fill="none" stroke="none" stroke-width="1.5" unselectable="on" preserveAspectRatio="xMidYMid meet" viewBox="0 0 180 380" height="300px" width="100%">
        <line x1="0" y1="0" x2="40" y2="400" style="stroke:rgb(255,0,0);stroke-width:2" />
      </svg>

  </div>
</div>

你的SVG应该具有px而不是%的高度，以便在父div变小时使其可滚动，否则，它将适合其父级。

overflow-y: auto;

是更好的选择，可以在不需要时隐藏滚动条。

我已经更新了你的小提琴： https://jsfiddle.net/a876hjum/5/
更改.main大小以查看滚动条如何以较大的尺寸隐藏，并以较小的尺寸显示。

SVG的溢出-Y与嵌套Div中的viewBox不起作用

1 个答案: