Svg icon has mirror reflection

I changed icons definition in SVG Icons Sample to my (I use icomoon svg icons definitions) and then I notice that my icons are displayed with mirror reflection (up side down). What is the reason ?

We also are using icomoon icons, so we’re surprised.

Could you post the SVG you are using, and what it looks like in your app?

I declare icon’s array for example: myOwnIcons = {
“icon1”: “M512.448 253.376c-1.184 0-2.368 0-3.552….”,
“icon2”: “M512.448 253.376c-1.184 0-2.368 0-3.552…”,
“icon3”: “M512.448 253.376c-1.184 0-2.368 0-3.552…” and so one}

NextI fill path:

for (var k in icons) {
myOwnIcons[k] = go.Geometry.fillPath(myOwnIcons[k]);
}

And this is part of my nodes definition:

$(go.Node, “Vertical”,
$(go.Panel, “Auto”, {name: “ICON”, width: 40, height: 40},
$(go.Shape,
{ desiredSize: new go.Size(30, 36), strokeWidth: 0 },
new go.Binding(“geometryString”, “type”, getNodeIcon))
),

getNodeIcon is simple switch method:

function getNodeIcon(iconName) {
if (myOwnIcons[iconName]) return myOwnIcons[iconName];
else return emptyIcon; // icon not founded
}

In icomoon icons definitions I can see:

With icomoon.svg definition:
<glyph unicode=“” d= “M512.448 253.376c-1.184 0-2.368 0-3.552…”


On the canvas it look like (up side down):

Anyone has idea what is the reason ?

Well, I downloaded the icon-pencil from icomoon and got this in the pencil.svg file:





I put that in as the geometryString, though I added a "f " to the beginning to fill the figure:

http://codepen.io/simonsarris/pen/MYBBoq/right?editors=101

One thing I notice is that my path is a lot smaller than the one you are using. M27 instead of M512, but I’m not sure what that would have to do with it…

It is very weird.

This is my pencil svg definition<glyph unicode=“” …definition below… />:

M864 960c88.364 0 160-71.634 160-160 0-36.020-11.91-69.258-32-96l-64-64-224 224 64 64c26.742 20.090 59.978 32 96 32zM64 224l-64-288 288 64 592 592-224 224-592-592zM715.578 596.422l-448-448-55.156 55.156 448 448 55.156-55.156z

Icon is very big and I don’t knew why it is up side down. Could You give me advice what could be wrong ?

http://codepen.io/anon/pen/dPjLRR

Someone could help ?

It’s not upside down in GoJS. It’s upside down in the SVG definition you are using. Have a look at this:

http://codepen.io/simonsarris/pen/ZYMQjG

I set the scale of the GoJS Shape to 0.1 just so you can see them easier.

But look below the Diagram at the real SVG path inserted into the page. That’s just the way your path is! It’s not upside-down at all, that’s just the path definition being used.

I’m not sure how you got that path from icomoon, but what we did was select several icons, download them, and then look at one of the files for the SVG paths. They were all 32x32 paths, or something more manageable than the really large path you have.