Question

我试图在一个bootstrap轮播中嵌入一个jointjs图并遇到问题。如果图表位于初始/活动窗格上，则一切正常，但如果它是任何其他窗格，则元素和链接以奇怪的方式缩放，并且链接在元素的错误边连接。我将其缩小为svg的属性，将其渲染为为display：none设置的div。使用jointjs教程代码和一些简单的css重现问题的JSFiddle如下：

http://jsfiddle.net/L2wev6xc/4/

HTML

<button id="showsvg" type="button">Show Diagram</button>
<div id="myholder" class="hidden"></div>

CSS

#myholder {
  width:600px;
  height:300px;
  border: 1px solid black;
}
.hidden {
  /* comment out the line below and run again to see the different scaling and links */
  display: none;
}

JS

// cut paste entire jointjs tutorial here

$("#showsvg").click(function () {
  $("#myholder").removeClass("hidden");
});

如果我使用visibility属性，则不会发生这种情况。此外，对于上面的jsfiddle中的图表，缩放事项稍微偏离，但是在更大更复杂的图表中，事情变得更糟。

Answer 1

渲染元素时，JointJS文件必须可见。如果纸张不在实时DOM中（但是已分离，例如文档片段中的某处或显示为“没有”），则还不知道元素的维度。浏览器只知道RenderTree中的元素的维度（它是从实时DOM构建的）。这会在JointJS尝试根据其他人的位置定位某些SVG元素时产生问题。解决这个问题的唯一方法是在纸张可见（并显示）后，在图表中添加元素（然后填充纸张）。

JointJS缩放问题与display：none

1 个答案: