Question

当我想看到SVG图表的一小部分时，使用滚动条来平移它，我可以这样做：

<div style={{width: "800px", height: "500px", overflow: "scroll"} }>
 <svg className="gantt" xmlns="http://www.w3.org/2000/svg" 
      width="3000" height="450">
 </svg>
</div>

当外部div的宽度不是固定宽度时，如何获得相同的效果？

<div style={{width: "90%", height: "500px", overflow: "scroll"} }>

更新我发现上面的代码工作正常，除非放在flex布局内。请参阅下面的解决方案。

Answer 1

这对我来说很好。

<div style="width: 90%; height: 500px; overflow: scroll;">
 <svg className="gantt" 
      width="3000" height="450">
 </svg>
</div>

Answer 2

原来问题是SVG是flex div的孩子，这似乎会导致调整大小的问题。我找到的解决方案是将SVG放在一个绝对定位的容器中。

.svg {

  // actual size of svg...
  width: 3000px;
  height: 575px;


  // outer div to lock absolute position against...
  &__outer {
    position: relative;
    width: 100%;
    height: 600px;
    padding: 5px;
  }

  // inner div for scrolling...
  &__container {
    position: absolute;
    width: 99%;
    height: 600px;
    overflow: auto;
  }

<div className="svg__outer">
  <div className="svg__container">
    <svg className="svg" xmlns="http://www.w3.org/2000/svg">
    </svg>
  </div>
</div>

在弹性布局

2 个答案: