We are using GoJS 1.4.5 and are having difficulty with scaling SVG images in IE11. We have a node template that we are placing an image in the lower right hand corner to indicate the status for the node. The SVG image file we are using is natively 32x32 pixels, but we need to resize it to 21x21 so it looks better. Note: the image is from a common image library our company uses so it’s not easy to get a custom one that is 21x21. In the example below it is the complete.svg image that is in question. For the latest version of Chrome it looks like this (which is correct):
<span style=“font-size:11.0pt;font-family:“Calibri”,“sans-serif”; mso-fareast-font-family:Calibri;mso-fareast-theme-font:minor-latin;mso-ansi-: EN-US;mso-fareast-:EN-US;mso-bidi-:AR-SA”>
But in IE11 it looks like this:
I have tried all the different suggestions on the Pictures link in the Intro section on the web site, and as you will see in the node template definition below I have tried setting the different values desiredSize, maxSize, scale, width, height. But nothing has worked. Here is the header section of the SVG file:
<svg version=“1.1” id=“Layer_1” xmlns=“SVG namespace” xmlns:xlink=“XLink namespace” x=“0px” y=“0px”
<span =“Apple-tab-span” style=“white-space:pre”> width=“32” height=“32” viewBox=“0 0 32 32” style=“enable-background:new 0 0 32 32;” xml:space=“preserve”>
And here is the node template definition (it is the Picture information at the bottom of the definition that is in question) Note: I have left all the different things I have tried commented out in the code:
var taskNodeTemplate =
GO(go.Node, "Spot",
new go.Binding("position","", getPosition),
{
selectionAdorned: false
},
// the main content:
GO(go.Panel, "Vertical",
GO(go.Shape, "RoundedRectangle",
{
fill: taskNodeFillColor,
strokeWidth: 2,
stroke: taskNodeStrokeColor,
},
new go.Binding(“width”, “width”),
new go.Binding(“height”, “height”),
)
),
GO(go.TextBlock, new go.Binding(“text”, “name”), {
margin: 5,
doubleClick: handleNodeDoubleClick,
font: nodeFont
}),
GO(go.Picture,
{
alignment: go.Spot.BottomRight,
desiredSize: new go.Size(21, 21),
source: “images/complete.svg”
// maxSize: new go.Size(21,21),
// minSize: new go.Size(21,21),
// scale: 0.5,
// width: 21,
// height: 21
// stretch: go.GraphObject.Fill,
// imageStretch: go.GraphObject.Uniform
},
)
);
Any suggestions (beside the obvious one of don’t use IE ) would be greatly appreciated.