Question

我正在尝试创建4个基于SVG的图表，一个又一个。

加载图表后，我只能看到2个和一半的图表在Web浏览器上占据，而无需滚动。我可以看到在左侧和底部启用了滚动条，但是滚动条没有太多。

<div overflow="auto">
    <svg id="chart1" style="overflow-y:scroll"></svg>
    <svg id="chart2" style="overflow-y:scroll"></svg>
    <svg id="chart3" style="overflow-y:scroll"></svg>
    <svg id="chart4" style="overflow-y:scroll"></svg>
</div>

上面是4 svg，下面是它们的css。

   #chart1 {
        width: 100%;
        height: 100%;
        position: absolute;
    }

当我最小化网页时，我可以看到4个图表，否则只能看到2个一半。

我尝试过的一切： 1.为HTML，正文启用自动滚动 2.启用svg滚动（类似于上面的代码）。 3.增加html以及正文的高度和宽度。

 html, body {
                width: 100%;
                height: 200%;
                margin: 0px;
                padding: 0px;
            }

Answer 1

这里是jsfiddle上的一个示例，每个svg都有一个数据编号和一个公共类。通过此示例，您可以更轻松地解释自己的确切期望...

https://jsfiddle.net/ericsm/ondtxmp2/

，这里的代码也是如此：每个svg占用100％的身体。

<HTML>

<HEAD>
<style type="text/css">
    .container-charts {
     border:solid 8px blue;  
     div : 100%;
    }

    .chart {
            width: 100%;
            height: 100%;
            border:dashed 2px green;
     }

     html, body {
       margin: 0px;
       padding: 0px;
    }
  </style>

</HEAD>

<BODY>
    <div class="container-charts" overflow="auto">

    <svg class="chart" data-no="1">
          <ellipse cx="100" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
        </svg>

        <svg class="chart" data-no="2">
          <ellipse cx="100" cy="80" rx="100" ry="50" style="fill:blue;stroke-width:2" />
        </svg>    

        <svg class="chart" data-no="3">
          <ellipse cx="100" cy="80" rx="100" ry="50" style="fill:gray;stroke-width:2" />
        </svg>

        <svg class="chart" data-no="3">
          <ellipse cx="100" cy="80" rx="100" ry="50" style="fill:black;stroke-width:2" />
        </svg>    

    </div>
</BODY>

</HTML>

使用多个SVG滚动

1 个答案: