We are reading our svg file to get the path string. Everything works great except the SVG images are upside down. I understand this is typical so that is not the issue. In angularjs service I have created I do the following steps to flip the SVG icon.
var geo = go.Geometry.parse(<iconString>, true); geo.scale(1, -1); geo.normalize();
The string I’m using to create the geo is as follows: M632.571 449.714l-424-424q-10.857-10.857-25.714-10.857t-25.714 10.857l-94.857 94.857q-10.857 10.857-10.857 25.714t10.857 25.714l303.429 303.429-303.429 303.429q-10.857 10.857-10.857 25.714t10.857 25.714l94.857 94.857q10.857 10.857 25.714 10.857t25.714-10.857l424-424q10.857-10.857 10.857-25.714t-10.857-25.714z
What am I missing? Any help would be appreciated.
Thanks!
I changed the following code to use your code to modify the created Geometry:
// "icons" is defined in icons.js
// SVG paths have no flag for being filled or not, but GoJS Geometry paths do.
// We want to mark each SVG path as filled:
for (var k in icons) {
var geo = go.Geometry.parse(icons[k], true);
geo.scale(1, -1);
geo.normalize();
icons[k] = geo;
}
And then I changed the binding to bind Shape.geometry rather than the Shape.geometryString:
That is what I see if I comment out the scale code. The Icons are upside down. Sorry, I gave you a horrible path to test with as it was a chevron right… my fault.
this is a string for the info button that might be easier to see M448 634.649c0 26.405 21.614 48.018 48.018 48.018h32c26.405 0 48.018-21.614 48.018-48.018v-32c0-26.405-21.614-48.018-48.018-48.018h-32c-26.405 0-48.018 21.614-48.018 48.018v32zM640 170.667h-256v64h64v192h-64v64h192v-256h64v-64z
When I comment out the scale I see this:
When I uncomment the scale I get the error. We were using version 1.4.27. My company just got me the newest version and it has fixed this issue…
Sorry for the waste of time. You can close this issue.