SVG 不能在 Div Wrapper 中使用溢出滚动：滚动答案

【问题标题】：SVG not scrollable in Div Wrapper using overflow:scollSVG 不能在 Div Wrapper 中使用溢出滚动：滚动
【发布时间】：2017-09-20 01:23:52
【问题描述】：

我希望能够在包装器 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/

截图：

【问题讨论】：

你的方法是错误的。您应该为每个元素创建单独的 svg，将它们浮动在 div 中。并将溢出滚动给该 div 的父级。
你只需要给#vulcanWrapper svg 一个比#vulcanWrapper 更大的高度来滚动，不是吗？
@RobertLongson - 感谢您的回复。对您的评论 - 是和否。是的部分是你是对的，比包装更大的 svg 将是可滚动的。没有部分是我不知道 svg 会有多大，因为 svg 中的元素是通过传入的数据使用 D3 动态绘制的。使用 4000px 高度：jsfiddle.net/intelligence_ai/eqyw7snd/4 不使用高度：jsfiddle.net/intelligence_ai/xpLxswnb/2 那里可能是svg的高度需要动态计算的情况。

标签： javascript css svg

【解决方案1】：

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

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

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

第一个值：0，我认为
第二个值：最顶层节点的垂直平移
第三个值：总共需要width。也为宽度属性设置它。
第四个值：节点数 * 节点高度 + 下边距

希望你能从这里弄清楚。

【讨论】：