CODEWITHSUNDEEP
javascripthtmlinternet-explorersvggojs
1D0BE
1D0BE

Reputation: 191

GoJS makeSVG not generating proper HTML SVG object

I have been using the Diagram.makeSVG() method to generate an SVG out of my diagram. Afterwards i added the SVG to a new blank tab using this code (diagram is my Diagram Object):

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

It worked well in Chrome and Firefox. But it did not work in IE11.

I did some debugging and figured that it was not only the Browsers fault. When generating the SVG GoJS is not generating a proper SVG (so it seems to me) when looking at the Type of it in the debugger

SVGSVGElement

As i said, it works fine in FF and Chrome. I think this is due to Chrome and Firefox tolerating the non-official HTMLElement Type, and say "Hmm, let's try adding it anyway", in contrast to IE 11 saying "Wowowow, no way adding this Element, thats not even closely some type of HTMLElement". Or did i get something wrong here?

I am now trying to find a workaround, to make it work in IE. However, I somehow can't find a way to just change the type of an object.

Any suggestions? Thanks in advance.

Upvotes: 2

Views: 1190

Answers (3)

Ronjark
Ronjark

Reputation: 69

I just followed the example from GOJs, and it works perfectly

[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 });
  }

Upvotes: 0

1D0BE
1D0BE

Reputation: 191

Okay, after endless research i can now say: "Internet Explore behaves strange. Often". The problem we have to deal with has its origin not as I expected with GoJS, but with some questionable (personal opinion) features of Internet Explorer.

The name of the game: Hierarchy.

When opening up a new tab with var newTab = window.open() Internet Explorer opens up a whole new workspace. That means the newTab variable is now a new window, having its own document and security restrictions.

GoJS' makeSvg() method generates an SVG on the window. There is no way to specify on which window it generates the SVG. I think you can see where I am going with this. By saying

newTab.document.body.appendChild(svg);

The security restrictions prevent me from adding an element to place where it was not intended to be. Big E just says "Nope", interupts the routine and throws an exception. By itself. But hey, you might be wondering: "Where does this exception go?" I do not fully understand it but, somehow it goes straight from IE to IE, and IE gets it all wrong and throws an exception to the console saying that an exception ("I can't add that element to a window which it was not created for") was not caught. But IE doesn't bother to give me the exception it could not handle. It only prints out the exception about the exception not being caught. Confused? I was.

So how do we solve this?

  1. Declare an empty HTMLElement(div) that you can put the SVG into on the first window (not the new tab).
  2. Add the SVG to the div you just created.
  3. take the div's innerHTML and add it to the new tab.

So, you are not adding an HTMLElement, but a String to the new tab.

There might be smarter solutions that i overlooked. However, the following code is the only one that worked for me, because it is capable of outplaying IE's "security" features. 

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

Upvotes: 2

Simon Sarris
Simon Sarris

Reputation: 63820

This seems to work fine in 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

For that matter, all of the examples on the making SVG intro page seem to work just fine on IE edge.

Is there something else you are doing?

Upvotes: 1

Related Questions