在可滚动区域内显示图表答案

【问题标题】：Showing a diagram within a scrollable area在可滚动区域内显示图表
【发布时间】：2014-11-15 21:14:02
【问题描述】：

想象一下，我希望屏幕的某个区域（例如，一个 500 x 500 像素的框）包含我的图表。如果我的图表的宽度或高度大于此值，我希望出现滚动条以允许我滚动图表。我试图通过将我的图表放在一个大小的<div> 元素中来实现这一点，但似乎图表忽略了这一点，它只是“溢出”。有没有人尝试过实现这一点并且可以分享一个食谱？

通过使用 Chrome 开发人员工具，我发现我确实有一个 <div>，它是 500 像素 x 500 像素，它似乎包含一个 <svg>，其宽度为 1082，整个宽度为 @987654325即使<svg> 包含在<div> 中，也会显示@。

【问题讨论】：

标签： jointjs

【解决方案1】：

当创建<div> 来保存图表并为其指定宽度和高度时，将其overflow css 属性设置为scroll。例如：

<div style="width: 500px; height: 500px; overflow: scroll;" />

另请参阅此 Stack Exchange 答案，它是此 jointjs 解决方案的核心，关于将滚动条添加到 <svg>。

How to get ScrollBars in SVG?

【讨论】：