function that I took from tiger example and adjust a bit for my needs.
export const convertSvgToShape = (svgString: string) => {
const container = new go.Panel();
const parsedSvg = new DOMParser().parseFromString(svgString, "image/svg+xml");
const svgPaths = parsedSvg.getElementsByTagName("path");
for (let i = 0; i < svgPaths.length; i++) {
// represent each SVG path by a Shape of type Path with its own fill and stroke
const path = svgPaths[i];
const shape = new go.Shape();
const stroke = path.getAttribute("stroke");
if (typeof stroke === "string" && stroke !== "none") {
shape.stroke = stroke;
} else {
shape.stroke = null;
}
const strokewidth = parseFloat(path.getAttribute("stroke-width"));
if (!isNaN(strokewidth)) shape.strokeWidth = strokewidth;
const id = path.getAttribute("id");
if (typeof id === "string") shape.name = id;
const fill = path.getAttribute("fill");
if (typeof fill === "string") {
shape.fill = (fill === "none") ? null : fill;
}
// convert the path data string into a go.Geometry
const data = path.getAttribute("d");
if (typeof data === "string") shape.geometry = go.Geometry.parse(data);
// collect these Shapes in the single Panel
container.add(shape);
}
return container;
}
OK, you have the GoJS code that I used in a node template, and the screenshot I took when the Diagram.scale was 1. I’m not seeing what you are seeing. Do you get that appearance at other scales or on other monitors or in other browsers or on other machines?
walter, I took your code, and used it. I can see the difference of how same thing looks like when diagram scales. In this particular case shapes that i’m building from svg looks odd in default scale but much better on larger scale. By using your code I only gained confidence that it is not the issue of how i build shapes but likely something wrong with svg paths, or with the scope where I put this panel with svg shapes or maybe even something else i dont know.
