SVG在Div Wrapper中不能使用overflow：scoll滚动

Question

我希望能够在包装器div中滚动svg的完整高度，但不幸的是它不可滚动。任何帮助表示赞赏。

SVG中渲染的树形图的大小将是动态的，因此我没有SVG的固定尺寸。

我正在寻找的解决方案是滚动条允许我在包装器中查看整个svg，其高度和宽度可以使用视口高度设置。

#vulcanWrapper {
  border:1px solid red;
  overflow: scroll;
  height:92vh;
  width: 100%;
}

#vulcanWrapper svg {
  height:88vh;
  width:90%;
  border:1px solid black;
}

您可以在jsfiddle上查看source code：

https://jsfiddle.net/intelligence_ai/0quz2pLL/3/

截图：

Answer 1

我已经查看了你的代码半小时了，我不得不承认我不了解你如何计算节点的位置。交换x和y肯定对你的情况没有帮助。

所以，这里只是经验证据：从CSS中删除svg的宽度和高度值，而是设置一个viewBox和一个width属性。对于您的数据集，这适用：

viewBox="0 -2540 820 5130" width="820"

• 第一个值：0，我认为
• 第二个值：最顶层节点的垂直翻译
• 第三个值：所需总数width。同样为宽度属性设置。
• 第四个值：节点数*节点高度+下边距

我希望你能从这里弄清楚。