Hi Simon,
I am facing similar issue. I am trying to render svg image in goJs picture and it’s not showing up in IE.
I am using GoJS v1.7.29 and IE 11.
I have added width and height in my SVG and added desiredSize attribute in my code but still no luck.
Is this issue still persists?
Thanks
This is different from the topic you posted in, which was related to using makeImage to generate an image of the whole diagram.
Can you show us your node template and maybe the SVG you are trying to render to a Picture?
Hi,
Image is cutting in IE and coming fine in other browsers
Below is my node template-
myDiagram.nodeTemplate = $(
go.Node,
"Auto",
{
background : "#e6e6e6"
},
{
selectionChanged : onSelectionChanged
},
new go.Binding("location", "loc",go.Point.parse).makeTwoWay(go.Point.stringify),
$(
go.Shape,
"RoundedRectangle",
{
margin : 5,
cursor : "pointer",
fromLinkable : true,
toLinkable : true,
name : "SHAPE"
}),
{
dragComputation : stayInGroup
}, // limit dragging of Nodes to stay within the containing Group, defined above
{
// this context menu Adornment is shared by all nodes
contextMenu : // define a context menu for each node that has one button
$(go.Adornment, "Vertical",
$("ContextMenuButton", $(
go.TextBlock,
globalizationData.CiTopAdContextMenuMoveToCI), {
click : moveToCi
}))
// end Adornment
},
$(
go.Panel,
"Horizontal",
$(
go.Panel,
"Vertical",
{
alignment : go.Spot.Top
},
$(
go.Picture,
{
name : "Picture1",
desiredSize : new go.Size(25,25),
margin : new go.Margin(5,2,0,5),
visible : CIVisible,
alignment : go.Spot.Left
},
new go.Binding("source","statusval",findStatusIcon),
new go.Binding("opacity","statusval",getStatusIconOpacity)),
$(
go.TextBlock,
textStyle(),
{
row : 3,
column : 0,
font : "12pt Segoe UI,sans-serif",
editable : false,
isMultiline : false,
},
new go.Binding(
"text","name",function(t) {
if (t.length > 10) {
return t.substring(0,7)+ "...";
} else {
return t;
}
}))
)) // end Horizontal Panel
);
findStatusIcon will return svg image name.
Below is my svg-
<!ENTITY ns_svg "http://www.w3.org/2000/svg">
<!ENTITY ns_xlink "http://www.w3.org/1999/xlink">
]>
<g>
<path fill="#F03FFF" d="M47,43.865234c0,1.742188-1.427734,3.166016-3.171875,3.166016H6.166016
C4.421875,47.03125,3,45.607422,3,43.865234V6.201172C3,4.458008,4.421875,3.03125,6.166016,3.03125h37.662109
C45.572266,3.03125,47,4.458008,47,6.201172V43.865234z"/>
</g>
</g>
<rect y="0.026367" fill="none" width="50" height="50.000977"/>
<linearGradient id="XMLID_2_" gradientUnits="userSpaceOnUse" x1="39.444336" y1="50.046875" x2="10.55322" y2="0.006001">
<stop offset="0.003663" style="stop-color:#406E37"/>
<stop offset="1" style="stop-color:#319341"/>
<a:midPointStop offset="0.003663" style="stop-color:#406E37"/>
<a:midPointStop offset="0.5" style="stop-color:#406E37"/>
<a:midPointStop offset="1" style="stop-color:#319341"/>
</linearGradient>
<path fill="url(#XMLID_2_)" d="M47,43.859375c0,1.742188-1.427734,3.167969-3.171875,3.167969H6.166016
C4.421875,47.027344,3,45.601563,3,43.859375V6.195313c0-1.742188,1.421875-3.168945,3.166016-3.168945h37.662109
C45.572266,3.026367,47,4.453125,47,6.195313V43.859375z"/>
<linearGradient id="XMLID_3_" gradientUnits="userSpaceOnUse" x1="38.839844" y1="48.99707" x2="11.161618" y2="1.056984">
<stop offset="0" style="stop-color:#80FF66"/>
<stop offset="0.042745" style="stop-color:#74F759"/>
<stop offset="0.163171" style="stop-color:#58E43B"/>
<stop offset="0.281347" style="stop-color:#43D725"/>
<stop offset="0.395237" style="stop-color:#37CF18"/>
<stop offset="0.5" style="stop-color:#33CC14"/>
<stop offset="0.619935" style="stop-color:#36CE18"/>
<stop offset="0.726931" style="stop-color:#41D522"/>
<stop offset="0.829013" style="stop-color:#52E035"/>
<stop offset="0.927432" style="stop-color:#6AF04E"/>
<stop offset="1" style="stop-color:#80FF66"/>
<a:midPointStop offset="0" style="stop-color:#80FF66"/>
<a:midPointStop offset="0.31" style="stop-color:#80FF66"/>
<a:midPointStop offset="0.5" style="stop-color:#33CC14"/>
<a:midPointStop offset="0.73" style="stop-color:#33CC14"/>
<a:midPointStop offset="1" style="stop-color:#80FF66"/>
</linearGradient>
<path fill="url(#XMLID_3_)" d="M45.899414,43.550781c0,1.308594-1.068359,2.375-2.375,2.375H6.475586
c-1.304688,0-2.375-1.066406-2.375-2.375V6.501953c0-1.305664,1.070313-2.375,2.375-2.375h37.048828
c1.306641,0,2.375,1.069336,2.375,2.375V43.550781z"/>
<rect id="_x3C_Slice_x3E__1_" fill="none" width="50" height="50"/>
<path opacity="0.3" fill="#FFFFFF" d="M43.524414,4.126953H6.475586c-1.304688,0-2.375,1.069336-2.375,2.375v37.048828
c0,1.308594,1.070313,2.375,2.375,2.375h37.048828c1.306641,0,2.375-1.066406,2.375-2.375V6.501953
C45.899414,5.196289,44.831055,4.126953,43.524414,4.126953z M45.272461,42.996094
c0,1.267578-1.035156,2.302734-2.302734,2.302734H7.030273c-1.267578,0-2.302734-1.035156-2.302734-2.302734v-35.9375
c0-1.267578,1.035156-2.304688,2.302734-2.304688h35.939453c1.267578,0,2.302734,1.037109,2.302734,2.304688V42.996094z"/>
<path opacity="0.2" fill="#FFFFFF" d="M45.899414,12.851563c0,0-28.693359-4.994141-41.798828,25.300781
c0-9.488281,0-31.72168,0-31.72168c0-1.305664,1.070313-2.375977,2.375-2.375977h37.048828
c1.306641,0,2.375,1.070313,2.375,2.375977V12.851563z"/>
<g>
<g>
<g>
<path fill="#FFFFFF" d="M10.282227,25.503906c0,0.742188-0.601563,1.344727-1.347656,1.344727
c-0.745117,0-1.350586-0.602539-1.350586-1.344727c0-0.748047,0.605469-1.351563,1.350586-1.351563
C9.680664,24.152344,10.282227,24.755859,10.282227,25.503906z"/>
<circle fill="#FFFFFF" cx="19.98877" cy="9.580078" r="1.348145"/>
<path fill="#FFFFFF" d="M16.905273,11.855469c0,0.745117-0.602539,1.350586-1.350586,1.350586
c-0.742188,0-1.347656-0.605469-1.347656-1.350586c0-0.744141,0.605469-1.347656,1.347656-1.347656
C16.302734,10.507813,16.905273,11.111328,16.905273,11.855469z"/>
<path fill="#FFFFFF" d="M13.396484,15.370117c0,0.742188-0.603516,1.347656-1.349609,1.347656
c-0.744141,0-1.348633-0.605469-1.348633-1.347656c0-0.74707,0.604492-1.348633,1.348633-1.348633
C12.792969,14.021484,13.396484,14.623047,13.396484,15.370117z"/>
<circle fill="#FFFFFF" cx="9.634277" cy="20.151367" r="1.349121"/>
<path fill="#FFFFFF" d="M24.967773,7.466797c-0.005859,0-0.009766,0-0.013672,0v0.03125
c-0.68457,0.066406-1.226563,0.611328-1.226563,1.307617c0,0.693359,0.541992,1.244141,1.226563,1.304688v0.001953
c0.003906,0,0.005859,0,0.007813,0c0.041016,0.005859,0.075195,0.026367,0.114258,0.026367
c0.026367,0,0.046875-0.015625,0.071289-0.017578c8.040039,0.099609,14.535156,6.641602,14.535156,14.706055
c0,8.124023-6.588867,14.710938-14.711914,14.710938c-4.533203,0-8.574219-2.060547-11.270508-5.288086
c1.65918,0.804688,3.205078,1.553711,3.205078,1.553711c0.650391,0.314453,1.439453,0.044922,1.758789-0.607422
c0.316406-0.65625,0.041016-1.442383-0.611328-1.760742L10.709961,29.875
c-0.423828-0.207031-0.924805-0.168945-1.3125,0.095703c-0.389648,0.261719-0.607422,0.71582-0.574219,1.182617
l0.592773,8.237305c0.054688,0.727539,0.680664,1.270508,1.40625,1.216797
c0.693359-0.048828,1.222656-0.626953,1.222656-1.308594c0-0.03418-0.001953-0.064453-0.001953-0.097656
c0,0-0.104492-1.432617-0.222656-3.087891C15,39.823242,19.706055,42.1875,24.967773,42.1875
c9.573242,0,17.362305-7.785156,17.362305-17.358398C42.330078,15.254883,34.541016,7.466797,24.967773,7.466797z"/>
</g>
</g>
</g>
</g>
Could you show a screenshot of the result in IE11 and a screenshot of the results in Firefox and in Chrome?
It’s possible that it’s just a bug in IE11 about which we have no control.
Hi,
Attached are the screenshots-
IE might be more strict about valid SVG. When I input your SVG into a validator, there are many errors. Is your full SVG listed above?
By the way, are you using the debug version of GoJS?