mxGraph渲染draw.io图表超出DIV容器，graph.fit()无效求助排查

我之前也碰到过一模一样的情况，mxGraph的graph.fit()在处理大尺寸图表时，确实会因为SVG的min-width属性没被正确覆盖而导致溢出。下面是一步步的排查和解决方法：

1. 先给容器加上正确的CSS约束 #

首先检查你的.graph-container样式，必须给它明确的宽高限制，避免容器被图表强行撑开：

.graph-container {
  width: 100%;
  max-width: 100%; /* 确保不会超出父元素宽度 */
  height: 600px; /* 按页面需求设置固定高度，也可以用min-height */
  overflow: auto; /* 可选：需要滚动条就用auto，否则用hidden */
}

2. 修正graph.fit()后的SVG样式 #

graph.fit()执行后，mxGraph会给SVG设置一个远大于容器的min-width——这是为了防止小图表被过度拉伸，但对大图表反而起反作用。我们可以手动覆盖这个属性：

var container = document.getElementById('<portlet:namespace/>graph'); 
var graph = new mxGraph(container); 
var diagram = mxUtils.parseXml(xml); 
var codec = new mxCodec(diagram); 

// 解码加载图表
codec.decode(diagram.documentElement, graph.getModel()); 

// 执行默认的fit操作
graph.fit();

// 获取容器内的SVG元素，强制修正样式
var svgElement = container.querySelector('svg');
if (svgElement) {
  svgElement.style.minWidth = '100%';
  svgElement.style.maxWidth = '100%';
  svgElement.style.width = '100%';
  svgElement.style.height = 'auto'; // 让高度按比例自适应
}

3. 手动计算缩放比例（更可靠的方案） #

如果上面的方法还是不行，可以跳过graph.fit()，手动计算合适的缩放比例来适配容器：

var container = document.getElementById('<portlet:namespace/>graph'); 
var graph = new mxGraph(container); 
var diagram = mxUtils.parseXml(xml); 
var codec = new mxCodec(diagram); 

codec.decode(diagram.documentElement, graph.getModel()); 

// 获取容器和图表的边界尺寸
var containerRect = mxUtils.getBoundingRect(container);
var graphBounds = graph.getGraphBounds();

// 计算宽高方向的缩放比例，取较小值确保完全适配
var scaleX = containerRect.width / graphBounds.width;
var scaleY = containerRect.height / graphBounds.height;
var finalScale = Math.min(scaleX, scaleY);

// 应用缩放，同时让图表居中（可选）
var translateX = (containerRect.width - graphBounds.width * finalScale) / 2;
var translateY = (containerRect.height - graphBounds.height * finalScale) / 2;
graph.view.scaleAndTranslate(finalScale, translateX, translateY);

4. 调整mxGraph初始化配置 #

初始化graph时可以禁用自动调整容器大小的功能，避免图表撑开容器：

var graph = new mxGraph(container);
// 禁止图表调整容器尺寸
graph.setResizeContainer(false);
// 开启自动缩放适应容器
graph.view.setAutoScale(true);
// 设置自动缩放模式，优先适配宽高
graph.view.setAutoScaleMode(mxConstants.AUTOSCALE_FIT);

问题根源解释 #

draw.io导出的XML会包含图表的原始尺寸信息，mxGraph解码后会保留这个尺寸，并且默认给SVG设置min-width来维持图表的最小显示比例。当图表原始尺寸远大于容器时，这个min-width就会超出容器限制，导致graph.fit()无法正确将图表缩小到容器内。

内容的提问来源于stack exchange，提问作者Marco Azzalini