1

我试图在引导轮播中嵌入一个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");
});

如果我使用可见性属性，则不会发生这种情况，仅显示。此外，对于上面 jsfiddle 中的图表，缩放比例稍有偏差，但在更大、更复杂的图表中，情况会变得更糟。

4

1 回答 1

2

渲染元素时，JointJS 纸张必须可见。如果纸张不在活动 DOM 中（但分离，例如在文档片段中的某处或显示为“无”），则元素的尺寸尚不清楚。浏览器只知道 RenderTree（由实时 DOM 构建）中元素的尺寸。当 JointJS 试图根据其他元素的位置定位某些 SVG 元素时，这会产生问题。解决此问题的唯一方法是在纸张可见（并显示）后将元素添加到图表中（并因此填充纸张）。

于 2014-08-20T14:29:22.793 回答