Geometry path string designed in illustrator

Following one of your examples, I have the following code, which displays an SVG on my diagram

nodeDataArray: [
{
key: controllerPrefix,
name: “”,
id: “”,
geo: “F1 M0 0 L80,0 80,40 0,40 0 0 x M0,10 L80,10 x M 7,10 7,40 x M 73,10 73,40 z”,
size: “32 16”,
item: “Controller”,
color: blue
},

I have designed my own SVG in illustrator, and it has the following path:

<svg version=“1.1” id=“Layer_1” xmlns=“http://www.w3.org/2000/svg” xmlns:xlink=“http://www.w3.org/1999/xlink” x=“0px” y=“0px”
<span =“Apple-tab-span” style=“white-space:pre”> viewBox=“0 0 32 32” enable-background=“new 0 0 32 32” xml:space=“preserve”>

<span =“Apple-tab-span” style=“white-space:pre”> <path fill=“none” stroke="#000000" stroke-width=“0.1” stroke-miterlimit=“10” d=“M26,28.5c0,0.3-0.2,0.5-0.5,0.5h-23
<span =“Apple-tab-span” style=“white-space:pre”> C2.2,29,2,28.7,2,28.5V3.5C2,3.3,2.2,3,2.5,3h23C25.8,3,26,3.3,26,3.5V28.5z”/>

<path fill=“none” stroke="#000000" stroke-width=“0.1” stroke-miterlimit=“10” d=“M22.7,14c0.5,0,1,0,1.5,0c0.1,0.1,0.2,0.2,0.2,0.3
<span =“Apple-tab-span” style=“white-space:pre”> c0.1,0.4,0.3,0.8,0.4,1.2c0.1,0.4,0.3,0.7,0.8,0.8c0.2,0,0.3,0.1,0.5,0.2c0.2,0.1,0.3,0,0.4-0.1c0.4-0.3,0.9-0.7,1.3-1
<span =“Apple-tab-span” style=“white-space:pre”> c0.1-0.1,0.2-0.1,0.4,0c0.3,0.2,0.6,0.5,0.9,0.7c0.1,0.1,0.2,0.2,0.1,0.4c-0.2,0.4-0.3,0.8-0.5,1.2c-0.2,0.4-0.2,0.7,0.2,1
<span =“Apple-tab-span” style=“white-space:pre”> c0.1,0.1,0.2,0.2,0.3,0.4c0.1,0.2,0.2,0.2,0.4,0.2c0.6,0,1.1,0,1.7-0.1c0.2,0,0.3,0,0.3,0.2c0.1,0.4,0.2,0.7,0.4,1.1
<span =“Apple-tab-span” style=“white-space:pre”> c0.1,0.2,0,0.2-0.1,0.3c-0.5,0.3-0.9,0.6-1.4,0.9c-0.1,0.1-0.2,0.2-0.2,0.4c0,0.3,0,0.5,0,0.8c0,0.2,0.1,0.3,0.2,0.4
<span =“Apple-tab-span” style=“white-space:pre”> c0.5,0.3,0.9,0.6,1.4,0.9c0.1,0.1,0.2,0.2,0.1,0.3c-0.1,0.3-0.2,0.7-0.4,1.1c-0.1,0.2-0.2,0.2-0.4,0.2c-0.6,0-1.1,0-1.7-0.1
<span =“Apple-tab-span” style=“white-space:pre”> c-0.2,0-0.3,0.1-0.4,0.2c-0.2,0.3-0.3,0.5-0.5,0.7c-0.1,0.1-0.1,0.2-0.1,0.4c0.2,0.5,0.4,1,0.6,1.5c0.1,0.2,0,0.3-0.1,0.4
<span =“Apple-tab-span” style=“white-space:pre”> c-0.3,0.2-0.6,0.4-0.9,0.7c-0.1,0.1-0.2,0.1-0.4,0c-0.4-0.3-0.8-0.6-1.2-0.9c-0.2-0.2-0.5-0.3-0.8-0.1c-0.2,0.1-0.4,0.2-0.7,0.2
<span =“Apple-tab-span” style=“white-space:pre”> c-0.2,0-0.3,0.1-0.3,0.3c-0.2,0.5-0.3,1.1-0.5,1.6c0,0.1-0.1,0.2-0.3,0.2c-0.4,0-0.8,0-1.2,0c-0.2,0-0.3-0.1-0.4-0.3
<span =“Apple-tab-span” style=“white-space:pre”> c-0.1-0.5-0.3-1-0.5-1.6c-0.1-0.2-0.2-0.3-0.3-0.3c-0.3-0.1-0.5-0.2-0.8-0.2c-0.1,0-0.3,0-0.4,0.1c-0.5,0.3-0.9,0.7-1.4,1
<span =“Apple-tab-span” style=“white-space:pre”> c-0.1,0.1-0.2,0.1-0.4,0c-0.3-0.2-0.6-0.5-1-0.7c-0.1-0.1-0.2-0.2-0.1-0.3c0.2-0.4,0.3-0.9,0.5-1.3c0.2-0.4,0.2-0.7-0.2-1
<span =“Apple-tab-span” style=“white-space:pre”> c-0.1-0.1-0.2-0.3-0.3-0.4c-0.1-0.2-0.2-0.2-0.4-0.2c-0.5,0-1.1,0-1.6,0.1c-0.3,0-0.4-0.1-0.4-0.3c-0.1-0.4-0.2-0.7-0.4-1.1
<span =“Apple-tab-span” style=“white-space:pre”> c0,0,0-0.1,0-0.1c0.5-0.3,1-0.7,1.5-1c0.2-0.1,0.3-0.3,0.2-0.5c0-0.2,0-0.5,0-0.7c0-0.2,0-0.3-0.2-0.4c-0.5-0.3-1.1-0.7-1.6-1.1
<span =“Apple-tab-span” style=“white-space:pre”> c0,0,0-0.1,0-0.1c0.1-0.4,0.3-0.8,0.4-1.1c0.1-0.2,0.1-0.2,0.3-0.2c0.6,0,1.2,0,1.7,0c0.1,0,0.2-0.1,0.3-0.2
<span =“Apple-tab-span” style=“white-space:pre”> c0.2-0.2,0.4-0.5,0.6-0.7c0.1-0.1,0.1-0.2,0.1-0.4c-0.2-0.5-0.4-1.1-0.6-1.6c-0.1-0.2,0-0.3,0.1-0.4c0.3-0.2,0.6-0.4,1-0.7
<span =“Apple-tab-span” style=“white-space:pre”> c0.1-0.1,0.2-0.1,0.4,0c0.4,0.3,0.9,0.7,1.3,1c0.2,0.1,0.3,0.2,0.5,0.1c0.3-0.1,0.5-0.2,0.8-0.2c0.2,0,0.3-0.1,0.3-0.3
<span =“Apple-tab-span” style=“white-space:pre”> C22.3,15.2,22.5,14.6,22.7,14z M23.4,26.5c2.2,0,4-1.8,4.1-4c0-2.2-1.8-4.1-4.1-4.1c-2.2,0-4,1.9-4.1,4
<span =“Apple-tab-span” style=“white-space:pre”> C19.4,24.6,21.2,26.5,23.4,26.5z”/>

How do I translate the above, into goJS?

Did you want to include both SVG Path shape geometries into your one GoJS Shape? It appears that you can do that since the two SVG elements share the same fill, stroke, stroke-width, and stroke-miterlimit attributes.

If so, you can just concatenate the two strings with an “X” between them.

Don’t forget that if your want to fill either of the paths to prefix the path string with “F1”.

http://gojs.net/latest/intro/geometry.html

Thanks walter.

What if my SVG is something like this:

c-0.3,0-0.5-0.2-0.5-0.5v-25c0-0.3,0.2-0.5,0.5-0.5h16c0.3,0,0.5,0.2,0.5,0.5V28.5z"/> C9.2,32,9,31.8,9,31.5v-31C9,0.3,9.2,0,9.5,0l22,0C31.8,0,32,0.3,32,0.5V31.5z"/>

How do I string together all the tags?

Each 's geometry can be defined easily enough in the SVG path syntax. For example, the last one would be: “M-33.1 12.2h9v2.8h-9v-2.8z”. If you want it to be filled, prefix it with “F”.

But you can combine those s into one GoJS shape only if you expect them to use the same fill and stroke as the rest of the figures. Otherwise you will need to use separate Shapes in a “Position” Panel and set Shape.isGeometryPositioned to true on each of the Shapes.