SVG Parser

Hi all!!!
There is the example SVG Tiger Drawing in GoJS.

I have another SVG file, which is much different.
Help for this file to alter the script.


////////File///////////////////

The hard part is dealing with the CSS. There might be a way to incorporate that into a dynamically created style sheet in your HTML DOM (to handle parsing) and use getComputedStyle to deal with selectors so that you can get the right values to assign to the Shape properties. But I haven’t tried this to make sure it would work generally.

Ok, if parse just , , , , without CSS. How it need to do, use http://gojs.net/latest/samples/tiger.html

Sincerely yours

I rewrote the script, but it does not draw

function init() {
if (window.goSamples) goSamples();

<span =“apple-tab-span”="" style=“white-space:pre”> var tigerdrawing = new go.Panel();
var xmldoc = new DOMParser().parseFromString(tigersvg, “text/xml”);

<span =“apple-tab-span”="" style=“white-space:pre”> var ds = xmldoc.getElementsByTagName(“polyline”);
<span =“apple-tab-span”="" style=“white-space:pre”> for (var i = 0; i < ds.length; i++) {
<span =“apple-tab-span”="" style=“white-space:pre”> var path = ds;
<span =“apple-tab-span”="" style=“white-space:pre”> var shape = new go.Shape();
<span =“apple-tab-span”="" style=“white-space:pre”>
<span =“apple-tab-span”="" style=“white-space:pre”> var data = path.getAttribute(“points”);
<span =“apple-tab-span”="" style=“white-space:pre”> if (typeof data === “string”) shape.geometry = go.Geometry.parse(data, true);
<span =“apple-tab-span”="" style=“white-space:pre”>
<span =“apple-tab-span”="" style=“white-space:pre”> var clas = path.getAttribute(“class”);
<span =“apple-tab-span”="" style=“white-space:pre”> if (typeof clas === “string”) shape.name = clas;


<span =“apple-tab-span”="" style=“white-space:pre”> tigerdrawing.add(shape);
}
<span =“apple-tab-span”="" style=“white-space:pre”>
var ellipses = xmldoc.getElementsByTagName(“line”);
<span =“apple-tab-span”="" style=“white-space:pre”> for (var i = 0; i < ellipses.length; i++) {
<span =“apple-tab-span”="" style=“white-space:pre”> var path = ellipses;
<span =“apple-tab-span”="" style=“white-space:pre”> var shape = new go.Shape();


<span =“apple-tab-span”="" style=“white-space:pre”> var strokewidth = parseFloat(path.getAttribute(“cx”));
<span =“apple-tab-span”="" style=“white-space:pre”> if (!isNaN(strokewidth)) shape.strokeWidth = strokewidth;


<span =“apple-tab-span”="" style=“white-space:pre”> var strokewidt = parseFloat(path.getAttribute(“cy”));
<span =“apple-tab-span”="" style=“white-space:pre”> if (!isNaN(strokewidt)) shape.strokeWidth = strokewidt;


<span =“apple-tab-span”="" style=“white-space:pre”> var strokewid = parseFloat(path.getAttribute(“rx”));
<span =“apple-tab-span”="" style=“white-space:pre”> if (!isNaN(strokewid)) shape.strokeWidth = strokewid;


<span =“apple-tab-span”="" style=“white-space:pre”> var strokewi = parseFloat(path.getAttribute(“ry”));
<span =“apple-tab-span”="" style=“white-space:pre”> if (!isNaN(strokewi)) shape.strokeWidth = strokewi;


<span =“apple-tab-span”="" style=“white-space:pre”> var clas = path.getAttribute(“class”);
<span =“apple-tab-span”="" style=“white-space:pre”> if (typeof clas === “string”) shape.name = clas;


<span =“apple-tab-span”="" style=“white-space:pre”> tigerdrawing.add(shape);
}
<span =“apple-tab-span”="" style=“white-space:pre”>
<span =“apple-tab-span”="" style=“white-space:pre”> var lines = xmldoc.getElementsByTagName(“ellipse”);
<span =“apple-tab-span”="" style=“white-space:pre”> for (var i = 0; i < lines.length; i++) {
<span =“apple-tab-span”="" style=“white-space:pre”> var path = lines;
<span =“apple-tab-span”="" style=“white-space:pre”> var shape = new go.Shape();


<span =“apple-tab-span”="" style=“white-space:pre”> var strokewidth = parseFloat(path.getAttribute(“x1”));
<span =“apple-tab-span”="" style=“white-space:pre”> if (!isNaN(strokewidth)) shape.strokeWidth = strokewidth;


<span =“apple-tab-span”="" style=“white-space:pre”> var strokewidt = parseFloat(path.getAttribute(“y1”));
<span =“apple-tab-span”="" style=“white-space:pre”> if (!isNaN(strokewidt)) shape.strokeWidth = strokewidt;


<span =“apple-tab-span”="" style=“white-space:pre”> var strokewid = parseFloat(path.getAttribute(“x2”));
<span =“apple-tab-span”="" style=“white-space:pre”> if (!isNaN(strokewid)) shape.strokeWidth = strokewid;


<span =“apple-tab-span”="" style=“white-space:pre”> var strokewi = parseFloat(path.getAttribute(“y2”));
<span =“apple-tab-span”="" style=“white-space:pre”> if (!isNaN(strokewi)) shape.strokeWidth = strokewi;


<span =“apple-tab-span”="" style=“white-space:pre”> var clas = path.getAttribute(“class”);
<span =“apple-tab-span”="" style=“white-space:pre”> if (typeof clas === “string”) shape.name = clas;


<span =“apple-tab-span”="" style=“white-space:pre”> tigerdrawing.add(shape);
}
<span =“apple-tab-span”="" style=“white-space:pre”>
<span =“apple-tab-span”="" style=“white-space:pre”> var rects = xmldoc.getElementsByTagName(“rect”);
<span =“apple-tab-span”="" style=“white-space:pre”> for (var i = 0; i < rects.length; i++) {
<span =“apple-tab-span”="" style=“white-space:pre”> var path = rects;
<span =“apple-tab-span”="" style=“white-space:pre”> var shape = new go.Shape();


<span =“apple-tab-span”="" style=“white-space:pre”> var strokewidth = parseFloat(path.getAttribute(“x”));
<span =“apple-tab-span”="" style=“white-space:pre”> if (!isNaN(strokewidth)) shape.strokeWidth = strokewidth;


<span =“apple-tab-span”="" style=“white-space:pre”> var strokewidt = parseFloat(path.getAttribute(“y”));
<span =“apple-tab-span”="" style=“white-space:pre”> if (!isNaN(strokewidt)) shape.strokeWidth = strokewidt;


<span =“apple-tab-span”="" style=“white-space:pre”> var strokewid = parseFloat(path.getAttribute(“width”));
<span =“apple-tab-span”="" style=“white-space:pre”> if (!isNaN(strokewid)) shape.strokeWidth = strokewid;


<span =“apple-tab-span”="" style=“white-space:pre”> var strokewi = parseFloat(path.getAttribute(“height”));
<span =“apple-tab-span”="" style=“white-space:pre”> if (!isNaN(strokewi)) shape.strokeWidth = strokewi;


<span =“apple-tab-span”="" style=“white-space:pre”> var clas = path.getAttribute(“class”);
<span =“apple-tab-span”="" style=“white-space:pre”> if (typeof clas === “string”) shape.name = clas;


<span =“apple-tab-span”="" style=“white-space:pre”> var data = path.getAttribute(“transform”);
<span =“apple-tab-span”="" style=“white-space:pre”> if (typeof data === “string”) shape.geometry = go.Geometry.parse(data, true);


<span =“apple-tab-span”="" style=“white-space:pre”> tigerdrawing.add(shape);
}


<span =“apple-tab-span”="" style=“white-space:pre”> var tigerpart = new go.Part();
tigerpart.add(tigerdrawing);


var diagram = new go.Diagram(“myDiagram”);
diagram.add(tigerpart);
}
Why?


And it may be to do so, he would for any type of file???

You keep setting the Shape.strokeWidth when you need to be constructing the Shape.geometry.

You cannot use Geometry.parse to convert the string of x,y points for polyline or polygon.

Should the SVG look like:

Full SVG, does not fit.

I understood you, but what if the file structure changes again.
Have is a unique script that would take any SVG file?

Yes, I shrank down the image so that it would fit here.
We’ve been working on reading a subset of SVG, and we’re still not going to get it done for version 1.1.

My file has a 3000 lines, I can’t upload or show this file

Oh, I see you meant that you only posted an excerpt of the SVG.
For now, could you convert it to a PNG image rather than trying to represent it natively in GoJS?

No I didn’t.
What are you mean?

Use an SVG editor to write out a PNG file showing the graphics. Then your diagram can show that image using a Picture object, either as the background or inside a Node or however you would like to use it.

What about convert polyline/polygon into path and keep using the tiger.html code?

Something like this:

function convertSVGPolygonPolylineToPath(string) {
    return string
    // close path for polygon
        .replace(/(<polygon[\w\W]+?)points=(["'])([\.\d, ]+?)(["'])/g, "$1d=$2M$3z$4")
        // dont close path for polyline
        .replace(/(<polyline[\w\W]+?)points=(["'])([\.\d, ]+?)(["'])/g, "$1d=$2M$3$4")
        .replace(/poly(gon|line)/g, "path");
}

(credits: https://codepen.io/jakealbaugh/pen/GZwgzV)