Node displays wrong on IE, fine on other browsers

GoJS
1

I have a fairly complex node with an SVG shape in the upper left and an SVG icon overlaid onto that shape. I have another SVG icon in the lower right corner. In Chrome, firefox, and even microsoft edge, it displays correctly as shown below:

However, in IE (11 to be exact), it doesn’t display correctly and appears as shown below:

My node creation logic is as shown here and any help is appreciated:

_createGraphNodeTemplate: function (background, stroke, icon){
return this.goJS(go.Node,“Auto”,
{
desiredSize: new go.Size(226,100),
selectionAdorned: false,
mouseEnter: this._markDropZoneFocus,
mouseLeave: this._clearDropZoneFocusMark,
mouseDragEnter:this._markDropZoneFocus,
mouseDragLeave:this._clearDropZoneFocusMark,
mouseDrop:$.proxy(this.getController().mouseDrop,this.getController())
},

        this.goJS(go.Shape,
            {
                name: "OUTLINE",
                geometryString:"F M2,0 A2,2,0,0,0,0,2 V42 A2,2,0,0,0,2,44 H98 A2,2,0,0,0,100,42 V2 A2,2,0,0,0,98,0 Z",
                fill: background,
                stroke: stroke
            },
            new go.Binding("strokeWidth", "selected",function(selected, subject)
            {
                return selected ? 3 : 1;
            })
        ),
        this.goJS(go.Panel, "Horizontal",
            {
                margin: new go.Margin(0, 0, 0, 0)
            },
            this.goJS(go.TextBlock,
                {
                    font: "bold 11pt Helvetica, Arial, sans-serif",
                    stroke: stroke,
                    margin: 8,
                    maxSize: new go.Size(160, NaN),
                    wrap: go.TextBlock.WrapFit,
                    editable: false
                },
                new go.Binding("text")
            )
        ),
        this.goJS(go.Panel, "Spot",
            {
                margin: new go.Margin(0, 0, 0, 0),
                alignment:new go.Spot(0,0,0,0),
                alignmentFocus:go.Spot.TopLeft
            },
            this.goJS(go.Shape,
                {
                    geometryString: "F M5,0 A5,5,0,0,0,0,5,V35 A25,25,0,0,0,35,0 z",
                    fill: stroke,
                    stroke:stroke
                }
            ),
            this.goJS(go.Picture,
                {
                    width: 20, height: 20,
                    margin: new go.Margin(0, 0, 0, 2),
                    imageStretch: go.GraphObject.Uniform,
                    source: icon
                }
            )
        ),
        this.goJS(go.Panel, "Spot",
            {
                alignment:new go.Spot(1,1,-5,-5)
            },
            this.goJS(go.Picture,
                {
                    width: 20, height: 20,
                    margin: new go.Margin(0, 0, 0, 2),
                    imageStretch: go.GraphObject.Uniform,
                    source:"resources/sas/decisionmanager/visualeditor/images/ErrorSVG.svg",
                    visible:false
                },
                new go.Binding("visible","invalid",function(invalid){
                    return invalid;
                })
            ),
            this.goJS(go.Shape,"Rectangle",
                {
                    name: "errorMessage",
                    stroke:null,
                    fill:"transparent",
                    width:20,height:20,
                    margin: new go.Margin(0, 0, 0, 2),
                    stretch:go.GraphObject.Fill,
                    toolTip:this.goJS(go.Adornment, "Auto",
                        this.goJS(go.Shape, { fill: "#F8F8F8",stroke: "lightgray" }),
                        this.goJS(go.TextBlock, {
                                margin: 4,
                                wrap: true,
                                width: 200
                            },
                            new go.Binding("text","errorMessage",function(message){
                                return message;
                            })
                        )
                    )
                }
            )
        )
    )
}
2

As you can see and read at GoJS Pictures -- Northwoods Software, it is important for several browsers that both the Picture.desiredSize (or width and height) and the declared width and height of the SVG have the same values.

If you want to change the effective size of the Picture, you can set its GraphObject.scale, or put it inside a “Viewbox” Panel so that it is automatically scaled.

3

As always, I am amazed at how quickly and you respond and how you are always correct. Thank you! It works.