Node displays wrong on IE, fine on other browsers

@ernestjessee wrote:

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

Posts: 2

Participants: 2

Read full topic