jpro
December 11, 2017, 6:46pm
#1
We are using SVG images created via the same procedure. In Safari 9.1.3 on OSX some scale correctly while others do not.
phost.svg does NOT scale:
https://drive.google.com/file/d/1k7JVz63EtxYfsFr3Vh9JDPSIOvMhGaDk/view?usp=sharing
router.svg does scale:
https://drive.google.com/file/d/1-chsoLLI63zTpqZMkc31MkV4ulUsD0KP/view?usp=sharing
diagram.nodeTemplateMap.add('phost', $(go.Node, "Table", {},
// main node shape
$(go.Shape, "RoundedRectangle", {
row: 0,
column: 1,
parameter1: 10,
name: "SHAPE",
fromSpot: go.Spot.RightSide,
toSpot: go.Spot.LeftSide,
portId: "",
stretch: go.GraphObject.Fill,
fill: DISPLAY.nodeColor,
strokeWidth: 0,
minSize: new go.Size(60, 0)
}
),
// internal panel layer
$(go.Panel, "Auto", {
row: 0,
column: 1,
shadowVisible: false,
padding: new go.Margin(7, 10)
},
$(go.Picture, {source: "images/phost.svg", scale:1}))));
walter
December 11, 2017, 6:56pm
#2
1.0 is the default GraphObject.scale , so setting it has no effect.
I think you might need to set or bind the GraphObject.desiredSize (or both the GraphObject.width and the GraphObject.height ) to real values on your Picture object.
jpro
December 11, 2017, 7:01pm
#3
nope.
diagram.nodeTemplateMap.add('phost', $(go.Node, "Table", {},
// main node shape
$(go.Shape, "RoundedRectangle", {
row: 0,
column: 1,
parameter1: 10,
name: "SHAPE",
fromSpot: go.Spot.RightSide,
toSpot: go.Spot.LeftSide,
portId: "",
stretch: go.GraphObject.Fill,
fill: DISPLAY.nodeColor,
strokeWidth: 0,
minSize: new go.Size(60, 0)
}
),
// internal panel layer
$(go.Panel, "Auto", {
row: 0,
column: 1,
shadowVisible: false,
padding: new go.Margin(7, 10)
},
$(go.Picture, {source: "images/phost.svg", scale:1.1, desiredSize: new go.Size(20,20), width: 20, height: 20}))));
walter
December 11, 2017, 7:08pm
#4
width and height together are a synonym for desiredSize , so there’s no point in setting all three.
I’m not sure we can do anything about this – it might be a bug in Safari. How does it work in different browsers, or on different platforms?
jpro
December 11, 2017, 7:11pm
#5
we dev in chrome and firefox on osx, windows and linux with no problems in any of those. are you using svg elements to create these?
css, safari, svg
<svg preserveAspectRatio='none'>
simon
December 11, 2017, 7:34pm
#6
Yeah there are some odd SVG bugs with rendering to a canvas. We try to accomodate them, and give some guidelines here about what to do.
You seem to already be doing the right thing, except I recommend making sure your set width/height/desiredSize are exactly the values that the SVG element uses.
This example works for me in Chrome/Safari/IE11:
https://codepen.io/simonsarris/pen/ZvzwGp