GoJS makeSVG 没有生成正确的 HTML SVG 对象

Question

我一直在使用 Diagram.makeSVG() 方法从图表中生成 SVG。之后我使用此代码将 SVG 添加到新的空白选项卡（diagram 是我的图表对象）：

function print() {
  var newTab = window.open(),
      svg  = aclDiagram.makeSVG({
        some: options
      });
  newTab.document.body.appendChild(svg);
}

它在 Chrome 和 Firefox 中运行良好。但是它在 IE11 中不起作用。

我进行了一些调试并认为这不是只是浏览器的错误。生成 SVG 时，在调试器中查看它的类型时，GoJS 没有生成正确的 SVG（在我看来）

正如我所说，它在 FF 和 Chrome 中运行良好。我认为这是由于 Chrome 和 Firefox 容忍非官方 HTMLElement 类型，并说 "Hmm, let's try adding it anyway"，与 IE 11 说 "Wowowow, no way adding this Element, thats not even closely some type of HTMLElement" 形成对比。还是我哪里搞错了？

我现在正试图找到一种解决方法，使其在 IE 中工作。但是，我不知何故找不到一种方法来更改对象的类型。

有什么建议吗？提前致谢。

Answer 1

这似乎在 IE Edge 中运行良好：

var svg = myDiagram.makeSvg({
    scale: 0.5
  });
svg.style.border = "1px solid black";
document.body.appendChild(svg);

http://codepen.io/simonsarris/pen/qdgeGR?editors=101

就此而言，making SVG intro page 上的所有示例似乎在 IE edge 上运行良好。

你还有别的事情要做吗？

Answer 2

好的，经过无尽的研究，我现在可以说："Internet Explore behaves strange. Often"。我们必须处理的问题的起源与我对 GoJS 的预期不同，而是与 Internet Explorer 的一些有问题的（个人观点）功能有关。

游戏名称：Hierarchy。

使用 var newTab = window.open() 打开新标签时，Internet Explorer 会打开一个全新的工作区。这意味着 newTab 变量现在是一个新的 window，有自己的 document 和安全限制。

GoJS 的 makeSvg() 方法在 window 上生成一个 SVG。无法指定它在哪个 window 上生成 SVG。我想你可以看到我要去哪里。通过说

newTab.document.body.appendChild(svg);

安全限制阻止我将元素添加到不适合的位置。 Big E 只是说 "Nope"，中断例程并抛出异常。通过它自己。但是，嘿，你可能想知道："Where does this exception go?" 我不完全理解它，但是，它以某种方式直接从 IE 到 IE，IE 弄错了，并向控制台抛出一个异常，说一个异常（"I can't add that element to a window which it was not created for") 没有被抓到。但是 IE 并没有费心给我它无法处理的异常。它只打印出有关未捕获异常的异常。 困惑？我是。

那么我们如何解决这个问题呢？

声明一个空的 HTMLElement(div)，您可以将 SVG 放入第一个 window（不是新标签）。
将 SVG 添加到您刚刚创建的 div。
获取 div 的 innerHTML 并将其添加到新选项卡。

因此，您不是在向新选项卡添加 HTMLElement，而是添加字符串。

可能有我忽略的更聪明的解决方案。但是，以下代码是唯一对我有用的代码，因为它能够胜过 IE 的 "security" 功能。

newTab = window.open();
div = document.createElement("div");
div.appendChild(picture);
newTab.document.body.innerHTML = div.innerHTML;

Answer 3

我只是按照 GOJs 的例子做了，效果很好

[https://gojs.net/latest/samples/minimalBlob.html][1]

  function myCallback(blob) {
    var url = window.URL.createObjectURL(blob);
    var filename = "myBlobFile.png";

    var a = document.createElement("a");
    a.style = "display: none";
    a.href = url;
    a.download = filename;

    // IE 11
    if (window.navigator.msSaveBlob !== undefined) {
      window.navigator.msSaveBlob(blob, filename);
      return;
    }

    document.body.appendChild(a);
    requestAnimationFrame(function() {
      a.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    });
  }

  function makeBlob() {
    var blob = myDiagram.makeImageData( { background: "white", returnType: "blob", callback: myCallback });
  }

GoJS makeSVG 没有生成正确的 HTML SVG 对象

GoJS makeSVG not generating proper HTML SVG object

html

javascript

internet-explorer

svg

gojs