Hi Team,
I’m trying to render an icon, but the geometryString returned for this icon is producing a deformed result, even though the SVG is passed correctly. Could you help me understand why this might be happening and what the correct geometryString format should be to properly render this icon?
It’s hard for us to help you unless you provide the code that isn’t working (in this case the SVG), show what result you are getting, and what result you want instead.
Also tell us which version of GoJS you are using, and which browsers you have tried on which platforms. For this kind of issue, it’s important to try multiple browsers to see if the behavior is the same.
We are using version - “gojs”: “2.3.5”
Have tried this on chrome and safari, but the issue remains the same.
Below is the code that we are using to convert svg to required geometry string :
var geometryString = '';
var parsedSvg = new DOMParser().parseFromString(iconSVG, "image/svg+xml");
var paths = parsedSvg.getElementsByTagName("path");
for (var i = 0; i < paths.length; i++) {
var path = paths[i];
var pathD = path.getAttribute("d");
var fillRule = path.getAttribute("fill-rule");
if (typeof pathD === "string") {
if (fillRule === 'evenodd' || !fillRule)
geometryString = geometryString.concat('F0');
geometryString = geometryString.concat(pathD);
}
}
var geo = go.Geometry.parse(geometryString);
geo.normalize();
return geo;
svg shows this:
but the geometry string returns this:
Could you please share with us the SVG code?
Below is the svg:
<svg xmlns="http://www.w3.org/2000/svg"><path d='M6.279.073a.75.75 0 0 0-.558 0l-4.326 1.73a.75.75 0 0 0 0 1.393l4.327 1.73a.75.75 0 0 0 .557 0l4.327-1.73a.75.75 0 0 0 0-1.393L6.279.073ZM2.346 2.5 6 1.038 9.654 2.5 6 3.96 2.346 2.5Z'></path><path d='m2.346 4.923 2.911 1.165a2 2 0 0 0 1.486 0l2.911-1.165.952.38a.75.75 0 0 1 0 1.394l-4.327 1.73a.75.75 0 0 1-.557 0l-4.327-1.73a.75.75 0 0 1 0-1.393l.951-.38Z'></path><path d='m2.346 8.423-.951.38a.75.75 0 0 0 0 1.394l4.327 1.73a.75.75 0 0 0 .557 0l4.327-1.73a.75.75 0 0 0 0-1.393l-.952-.38-1.346.538 1.346.538L6 10.962 2.346 9.5l1.346-.538-1.346-.539Z'></path></svg>
And current geometry string which renders distorted image:
"F0M6.279.073a.75.75 0 0 0-.558 0l-4.326 1.73a.75.75 0 0 0 0 1.393l4.327 1.73a.75.75 0 0 0 .557 0l4.327-1.73a.75.75 0 0 0 0-1.393L6.279.073ZM2.346 2.5 6 1.038 9.654 2.5 6 3.96 2.346 2.5ZF0m2.346 4.923 2.911 1.165a2 2 0 0 0 1.486 0l2.911-1.165.952.38a.75.75 0 0 1 0 1.394l-4.327 1.73a.75.75 0 0 1-.557 0l-4.327-1.73a.75.75 0 0 1 0-1.393l.951-.38ZF0m2.346 8.423-.951.38a.75.75 0 0 0 0 1.394l4.327 1.73a.75.75 0 0 0 .557 0l4.327-1.73a.75.75 0 0 0 0-1.393l-.952-.38-1.346.538 1.346.538L6 10.962 2.346 9.5l1.346-.538-1.346-.539Z"
GoJS is actually correctly parsing that geometry, but the geometry in the SVG is actually three separate <path> objects using relative commands, which is leading to issues when you combine them to be a single <path>. This would look wrong if you did that in SVG also.
Because of how the SVG is constructed, you’ll need 3 GoJS shapes to independently display the 3 paths. Or else you would have to re-write the SVG so that it can function as a single <path> and series of subpaths.
The simplest way to retool the path would be to use M 0 0 to reset those subpaths. An example:
geometryString: `
F M6.279.073a.75.75 0 0 0-.558 0l-4.326 1.73a.75.75 0 0 0 0 1.393l4.327 1.73a.75.75 0 0 0 .557 0l4.327-1.73a.75.75 0 0 0 0-1.393L6.279.073ZM2.346 2.5 6 1.038 9.654 2.5 6 3.96 2.346 2.5Z
M0 0 m2.346 4.923 2.911 1.165a2 2 0 0 0 1.486 0l2.911-1.165.952.38a.75.75 0 0 1 0 1.394l-4.327 1.73a.75.75 0 0 1-.557 0l-4.327-1.73a.75.75 0 0 1 0-1.393l.951-.38Z
M0 0 m2.346 8.423-.951.38a.75.75 0 0 0 0 1.394l4.327 1.73a.75.75 0 0 0 .557 0l4.327-1.73a.75.75 0 0 0 0-1.393l-.952-.38-1.346.538 1.346.538L6 10.962 2.346 9.5l1.346-.538-1.346-.539Z
`
Example of GoJS using that, and SVG failing when given the path (without M0 0 resets) https://codepen.io/simonsarris/pen/poMymee