图超出分配的 div 容器

Question

我试图在一个完全独立的页面中显示一些使用 draw.io 编辑器设计的图表，通过 mxGraph，我解析从 draw.io 保存的 xml 文件并在其中渲染它一个元素。

<div class="graph-details" id="<portlet:namespace/>graph-details" >
   <div class="graph-container" id="<portlet:namespace/>graph"></div>
</div>

我的密码是

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());
graph.fit();

当图形很大时问题就出现了，graph.fit() 函数似乎无法将它缩减到我的 DIV 中，所以生成的元素从 DIV，将其与页面中的其他元素重叠。

可能是什么问题？我注意到在这种情况下 svg 元素的 min-width 属性比 parent 大得多。如果图表足够小，行为是正确的，如果我试图将它拖出 div.

，它就会被裁剪

提前致谢马可

Answer 1

原来有两个不同的问题：

1) fit() api 没有工作，因为调用 fit() 函数时 DIV 元素没有正确的宽度和高度，所以我预先计算在调用 graph.fit() 之前 DIV 的正确尺寸。现在所有图表都以最佳缩放比例呈现以适合页面，这也解决了一些跨浏览器呈现差异。

2) 我用一些代码来解决重叠的不当行为，以调整元素的 minWidth 和 minHeight 属性为 "fit-content" 值：

var svg=document.getElementsByTagName('svg');
if (svg!=undefined && svg!=null) {
    svg[0].style.minWidth='fit-content';
    svg[0].style.minHeight='fit-content';
}

图超出分配的 div 容器

Graphs goes out of the assigned div container

mxgraph