Is there any way to use complete SVG code as geometry string?

GoJS
1

Hi,
I am trying to use svg string in my palette by referring “tiger” example.

My problem here is my svg code contains additional information in it which is not available in tiger svg. I.e,
rect, ellipse, circle, clip-path, transform, linearGradient, gradientUnits, stroke-miterlimit, enable-background, polygon, points, overflow and so on…
How to use these kind of svg in my palette?

2

Use a Picture: GoJS Pictures -- Northwoods Software

3

If I use pictures I will not get the control on the shape.
That is if I have to bind the geometry string with color then picture will not allow it.

Is there any way for that?

4

I’m sorry, but I don’t understand your situation and what you are trying to accomplish.

Geometry objects only apply to Shapes. A Shape can have a complex Geometry, but it only has a single stroke brush, a single fill brush, and a single background brush. So if you have SVG with multiple “shapes”, you cannot represent that with only a single GoJS Shape. You have to use Panels containing multiple GraphObjects.

Why is using a Picture insufficient in your Palette?

5

Lets take tiger example itself to explain why Picture is insufficient in my palette.
In the tiger example, observe that the eye of tiger is in “Green” color.
In the run time I want to change its color to “Red” for one instance and “yellow” in another instance.
Is it possible to do that using picture object?

6

I’ll send you some unfinished and unsupported code that parses SVG to create GraphObjects.

7

Please send me the code that parses SVG to create GraphObjects.

8

I sent it to you on 16 October, in an attached ZIP file whose file type was renamed.

9

Is it…?
I have not received any email from you. Can you please resend the file.

10

I have sent you another email message with an attached zip file, “svgParse.zi_”, holding the unfinished and unsupported implementation of an SvgParse class.

11

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

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)