Changing the color of an go.Picture

I have go.Picture with an SVG file as a source. like the picture below


I want to dynamically change the color of the marked lines
is this possible in gojs?

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 58 58" style="enable-background:new 0 0 58 58;" xml:space="preserve">
<g id="_x34_">
	<path style="fill:#333333;" d="M53.725,5.692c0.002-0.037-0.002-0.072-0.005-0.108c-0.006-0.083-0.021-0.163-0.047-0.242
		c-0.011-0.035-0.02-0.068-0.036-0.101c-0.049-0.108-0.11-0.21-0.197-0.297c-0.087-0.087-0.189-0.148-0.297-0.197
		c-0.034-0.015-0.068-0.024-0.102-0.036c-0.079-0.026-0.158-0.041-0.241-0.047c-0.037-0.003-0.072-0.006-0.109-0.005
		c-0.098,0.004-0.195,0.023-0.29,0.056c-0.017,0.006-0.034,0.006-0.051,0.013c-0.003,0.001-0.007,0.001-0.01,0.003L5.119,24.951
		c-0.369,0.158-0.607,0.521-0.606,0.922c0.001,0.401,0.242,0.763,0.612,0.919l18.625,7.842l7.842,18.624
		c0.156,0.37,0.518,0.611,0.919,0.612c0.001,0,0.002,0,0.003,0c0.4,0,0.762-0.238,0.919-0.606l20.221-47.22
		c0.001-0.003,0.001-0.006,0.002-0.009c0.008-0.019,0.008-0.039,0.015-0.058C53.702,5.883,53.721,5.789,53.725,5.692z M48.358,8.612
		L24.281,32.688l-16.21-6.825L48.358,8.612z M32.521,50.312l-6.825-16.21l24.077-24.076L32.521,50.312z"/>
	<path style="fill:#4A90E2;" d="M20.22,38.163c-0.391-0.391-1.023-0.391-1.414,0l-8.5,8.5c-0.391,0.391-0.391,1.023,0,1.414
		c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293l8.5-8.5C20.61,39.187,20.61,38.554,20.22,38.163z"/>
	<path style="fill:#4A90E2;" d="M11.22,34.163c-0.391-0.391-1.023-0.391-1.414,0l-8.5,8.5c-0.391,0.391-0.391,1.023,0,1.414
		c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293l8.5-8.5C11.61,35.187,11.61,34.554,11.22,34.163z"/>
	<path style="fill:#4A90E2;" d="M24.22,47.163c-0.391-0.391-1.023-0.391-1.414,0l-8.5,8.5c-0.391,0.391-0.391,1.023,0,1.414
		c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293l8.5-8.5C24.61,48.187,24.61,47.554,24.22,47.163z"/>
</g>
<g id="Layer_1">
</g>
</svg>

You’ll need to convert the SVG into separate GoJS Shapes. Something like:

$(go.Panel,
  $(go.Shape, { geometryString: ..., isGeometryPositioned: true }),
  $(go.Shape, { geometryString: ..., isGeometryPositioned: true })
)

Then for each Shape you can programmatically modify the stroke color or you can add a Binding to do so.
https://gojs.net/latest/intro/geometry.html
https://gojs.net/latest/samples/icons.html
https://gojs.net/latest/samples/tiger.html

I have applied what you say

What is the reason for a gap

My code:
Untitled

 bindShapeGeometry(sourceData: IUnifiedShape) {
            return go.Geometry.parse(Tools.Shapes[sourceData.shapeKey], true);
    }

    goMake(go.Panel, "Viewbox",
                {
                    cursor: "move",
                    background: "transparent",
                    padding: 5
                },
                new go.Binding("desiredSize", "", this.bindShapeSize),
                goMake(go.Panel, "Position",
                    {
                        itemTemplate:
                            goMake(go.Panel,
                                goMake(go.Shape, "RoundedRectangle",
                                    {
                                        isGeometryPositioned: true,
                                        shadowVisible: false
                                    },
                                    new go.Binding("stroke", "", this.bindPanelItemBorderColor.bind(this)),
                                    new go.Binding("fill", "", this.bindPanelItemColor.bind(this)),
                                    new go.Binding("geometry", "", this.bindShapeGeometry.bind(this)),
                                    new go.Binding("strokeWidth", "", (sourceData: IUnifiedShape) => { return sourceData.stroke ? 2 : 0 })
                                )
                            )
                    },
                    new go.Binding("itemArray", "", this.bindPanelItemArray.bind(this)),
                ),
            );

H1 svg :

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 58 58" style="enable-background:new 0 0 58 58;" xml:space="preserve">
<g id="_x31_">
	<g>
		<g>
			<path d="M14.81,39.01V16.335c0-0.779,0.632-1.411,1.411-1.411h0c0.779,0,1.411,0.632,1.411,1.411v9.23h9.757v-9.23
				c0-0.779,0.632-1.411,1.411-1.411h0c0.779,0,1.411,0.632,1.411,1.411V39.01c0,0.779-0.632,1.411-1.411,1.411h0
				c-0.779,0-1.411-0.632-1.411-1.411V28.114h-9.757V39.01c0,0.779-0.632,1.411-1.411,1.411h0
				C15.441,40.421,14.81,39.789,14.81,39.01z"/>
		</g>
		<g>
			<path d="M36.542,21.858c-0.623,0-1.129-0.505-1.129-1.129v0c0-0.593,0.464-1.083,1.056-1.123
				c2.684-0.178,4.295-0.939,4.853-3.716c0.112-0.557,0.595-0.967,1.163-0.967l0,0c0.657,0,1.19,0.533,1.19,1.19V39.01
				c0,0.779-0.632,1.411-1.411,1.411l0,0c-0.779,0-1.411-0.632-1.411-1.411V21.858H36.542z"/>
		</g>
	</g>
</g>
<g id="Layer_1">
</g>
</svg>

Is there extra space around the geometries that you are using as the data sources?

Yes there is as shown in the image. I’ve shared the svg code above. I want to use this svg.

How to solve

You are setting the desiredSize through a binding. How are you determining that size? If you don’t set or bind it, does it work better because it’s within a “Viewbox” Panel?

By the way, you have a lot of Bindings that use a source property that is an empty string. For performance reasons you should not do so unless it is necessary. Besides, I think this is clearer:

new go.Binding("strokeWidth", "stroke", s => s ? 2 : 0)

I don’t set or bind it, still adding space why? how to fix this?

Thank you also for your suggestions

My template map:

makePort(name: string, align: any, spot: any, output: any, input: any) {
        var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
        return goMake(go.Shape,
            {
                fill: "transparent",  // changed to a color in the mouseEnter event handler
                strokeWidth: 0,  // no stroke
                width: horizontal ? NaN : 8,  // if not stretching horizontally, just 8 wide
                height: !horizontal ? NaN : 8,  // if not stretching vertically, just 8 tall
                alignment: align,  // align the port on the main Shape
                stretch: (horizontal ? go.GraphObject.Horizontal : go.GraphObject.Vertical),
                portId: name,  // declare this object to be a "port"
                fromSpot: spot,  // declare where links may connect at this port
                fromLinkable: false,  // declare whether the user may draw links from here
                toSpot: spot,  // declare where links may connect at this port
                fromLinkableSelfNode: false,
                fromLinkableDuplicates: true,
                toLinkableSelfNode: false,
                toLinkableDuplicates: true
            },
            new go.Binding("toLinkable", "", this.bindNodeToLinkable.bind(this))
        );
    }
    makeHelperArrow(name: any, align: any, spot: any, output: any, input: any, imageType: any) {

        var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
        var alignmentFocus = align.opposite();
        alignmentFocus.offsetX = 0;
        alignmentFocus.offsetY = 0;
        alignmentFocus.x = alignmentFocus.x === 1 || alignmentFocus.x === 0 ? alignmentFocus.x : 0.5;
        alignmentFocus.y = alignmentFocus.y === 1 || alignmentFocus.y === 0 ? alignmentFocus.y : 0.5;
        return goMake(go.Picture, Tools.LinkHelpers[imageType],
            {
                name: name,
                cursor: "copy",
                desiredSize: new go.Size(12, 12),
                alignment: align,
                portId: name,
                fromSpot: spot,
                toSpot: spot,
                toLinkable: false,
                opacity: 0,
                alignmentFocus: alignmentFocus,
                mouseEnter: (e: any, node: any) => {

                    if (node.name == "L_H") {
                        this.diagram.toolManager.linkingTool.temporaryLink.fromSpot = go.Spot.LeftSide;
                        this.diagram.toolManager.linkingTool.temporaryLink.toSpot = go.Spot.RightSide;
                    } else if (node.name == "R_H") {
                        this.diagram.toolManager.linkingTool.temporaryLink.fromSpot = go.Spot.RightSide;
                        this.diagram.toolManager.linkingTool.temporaryLink.toSpot = go.Spot.LeftSide;
                    } else if (node.name == "T_H") {
                        this.diagram.toolManager.linkingTool.temporaryLink.fromSpot = go.Spot.TopSide;
                        this.diagram.toolManager.linkingTool.temporaryLink.toSpot = go.Spot.BottomSide;
                    } else if (node.name == "B_H") {
                        this.diagram.toolManager.linkingTool.temporaryLink.fromSpot = go.Spot.BottomSide;
                        this.diagram.toolManager.linkingTool.temporaryLink.toSpot = go.Spot.TopSide;
                    }

                    let fromLinkable = this.bindNodeFromLinkable(node.part.data);
                    node.cursor = fromLinkable ? "copy" : "default";

                    var items = ["T_H", "L_H", "R_H", "B_H"];
                    node.opacity = fromLinkable ? .8 : 0;

                    for (var i = 0; i <= items.length; i++) {
                        if (node.name !== items[i]) {
                            if (node.part.findObject(items[i])) {
                                node.part.findObject(items[i]).opacity = fromLinkable ? .4 : 0;
                            }
                        }
                    }
                }
            },
            new go.Binding("visible", "", this.bindNodeFromLinkable.bind(this)),
            new go.Binding("fromLinkable", "", this.bindNodeFromLinkable.bind(this)),
        );
    }

    bindShapeGeometry(sourceData: IUnifiedShape) {
        return go.Geometry.parse(Tools.Shapes[sourceData.shapeKey], true);
    }

    getNodeShape() {
        return goMake(go.Panel, "Viewbox",
            {
                cursor: "move",
                background: "transparent",
                padding: 5
            },
            goMake(go.Panel, "Position",
                {
                    itemTemplate:
                        goMake(go.Panel,
                            goMake(go.Shape, "RoundedRectangle",
                                {
                                    isGeometryPositioned: true,
                                    shadowVisible: false
                                },
                                new go.Binding("stroke", "", this.bindPanelItemBorderColor.bind(this)),
                                new go.Binding("fill", "", this.bindPanelItemColor.bind(this)),
                                new go.Binding("geometry", "", this.bindShapeGeometry.bind(this)),
                                new go.Binding("strokeWidth", "", (sourceData: IUnifiedShape) => { return sourceData.stroke ? 2 : 0 })
                            )
                        )
                },
                new go.Binding("itemArray", "", this.bindPanelItemArray.bind(this)),
            ),
        );
    }

    this.diagram.nodeTemplateMap.add("", goMake(go.Node, "Spot", {
            zOrder: 5,
            locationObjectName: "Shape",
            locationSpot: go.Spot.Center,
            selectionAdornmentTemplate: nodeSelectionAdornmentTemplate,
            selectionObjectName: "Shape",
            resizeObjectName: "Shape",
            rotateObjectName: "Shape",
            resizeAdornmentTemplate: nodeResizeAdornmentTemplate,
            resizable: this.props.config.nodeConfig.resizable,
            rotatable: true,
            rotateAdornmentTemplate: nodeRotateAdornmentTemplate,
            isShadowed: true,
            shadowVisible: false,
            shadowBlur: 10,
            background: "transparent",
            shadowOffset: new go.Point(0, 0),
            click: (e: go.InputEvent, obj: go.GraphObject) => {
                if (obj && obj.part && obj.part.data && obj.part.data.nodeConfig && obj.part.data.nodeConfig.isLock) {
                    this.diagram.select(obj.part);
                }
            },
            doubleClick: () => {
                this.openPropertyInspector();
            },
            mouseEnter: (e: go.InputEvent, node: go.Node) => {

                let fromLinkable = this.bindNodeFromLinkable(node.data);

                let items = ["T_H", "L_H", "R_H", "B_H"];
                for (let i = 0; i <= items.length; i++) {
                    if (node.part.findObject(items[i])) {
                        node.part.findObject(items[i]).opacity = fromLinkable ? .4 : 0;
                    }
                }
                this.toggleHighlightLinksAndNodes(node.part.data.key, true);
            },
            mouseLeave: (e, node) => {
                let items = ["T_H", "L_H", "R_H", "B_H"];
                for (let i = 0; i <= items.length; i++) {
                    if (node.part.findObject(items[i])) {
                        node.part.findObject(items[i]).opacity = 0;
                    }
                }
            }
        },
            new go.Binding("shadowColor", "", this.bindShapeTextBackgroundColor),
            new go.Binding("location", "", this.bindShapeLocation).makeTwoWay(this.converterShapeLocation),
            new go.Binding("isActionable", "", this.bindShapeLock),
            goMake(go.Panel, "Vertical",
                goMake(go.Panel, "Spot",
                    goMake(go.Panel, "Spot",
                        {
                            shadowVisible: false,
                            name: "Shape"
                        },
                        new go.Binding("desiredSize", "", this.bindShapeSize).makeTwoWay(this.converterShapeSize),
                        new go.Binding("angle", "", this.bindShapeAngle).makeTwoWay(this.converterShapeAngle),
                        this.getNodeShape()
                    ),
                    this.makePort("T", go.Spot.Top, go.Spot.TopSide, false, true),
                    this.makePort("L", go.Spot.Left, go.Spot.LeftSide, false, true),
                    this.makePort("R", go.Spot.Right, go.Spot.RightSide, false, true),
                    this.makeHelperArrow("T_H", go.Spot.Top, go.Spot.TopSide, false, true, "imageTop"),
                    this.makeHelperArrow("L_H", go.Spot.Left, go.Spot.LeftSide, true, true, "imageLeft"),
                    this.makeHelperArrow("R_H", go.Spot.Right, go.Spot.RightSide, true, true, "imageRight")
                ),
                goMake(go.Panel, "Spot",
                    goMake(go.Panel, "Auto",
                        goMake(go.Shape, "RoundedRectangle", { fill: "rgba(0, 0, 0, 0.1)", strokeWidth: 0 }),
                        goMake(go.TextBlock,
                            {
                                editable: true,
                                stroke: "black",
                                font: "6pt sans-serif",
                                verticalAlignment: go.Spot.Center,
                                alignment: go.Spot.Center,
                                margin: new go.Margin(1, 5, 0, 5)
                            },
                            new go.Binding("text", "", this.bindShapeText).makeTwoWay(this.converterShapeText),
                            //new go.Binding("stroke", "", this.bindShapeTextColor),
                            //new go.Binding("font", "", this.bindShapeTextFont),
                            new go.Binding("isUnderline", "", this.bindShapeTextUnderline),
                            //new go.Binding("background", "", this.bindShapeTextBackgroundColor),
                            //new go.Binding("textAlign", "", this.bindShapeTextAlignment),
                        )
                    ),
                    this.makePort("B", go.Spot.Bottom, go.Spot.BottomSide, false, true),
                    this.makeHelperArrow("B_H", go.Spot.Bottom, go.Spot.BottomSide, true, false, "imageBottom"),
                )
            )
        ));

If I were you I would modify the geometry path string to be the size I wanted.

But you could also try:

new go.Binding("geometryString", "sourceKey", sk => go.Geometry.fillPath(Tools.Shapes[sk]))

don’t get any results walter. The problem continues.
you can try the svg I sent you?

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 58 58" style="enable-background:new 0 0 58 58;" xml:space="preserve">
<g id="_x31_">
	<g>
		<g>
			<path d="M14.81,39.01V16.335c0-0.779,0.632-1.411,1.411-1.411h0c0.779,0,1.411,0.632,1.411,1.411v9.23h9.757v-9.23
				c0-0.779,0.632-1.411,1.411-1.411h0c0.779,0,1.411,0.632,1.411,1.411V39.01c0,0.779-0.632,1.411-1.411,1.411h0
				c-0.779,0-1.411-0.632-1.411-1.411V28.114h-9.757V39.01c0,0.779-0.632,1.411-1.411,1.411h0
				C15.441,40.421,14.81,39.789,14.81,39.01z"/>
		</g>
		<g>
			<path d="M36.542,21.858c-0.623,0-1.129-0.505-1.129-1.129v0c0-0.593,0.464-1.083,1.056-1.123
				c2.684-0.178,4.295-0.939,4.853-3.716c0.112-0.557,0.595-0.967,1.163-0.967l0,0c0.657,0,1.19,0.533,1.19,1.19V39.01
				c0,0.779-0.632,1.411-1.411,1.411l0,0c-0.779,0-1.411-0.632-1.411-1.411V21.858H36.542z"/>
		</g>
	</g>
</g>
<g id="Layer_1">
</g>
</svg>

Did you try rewriting the geometry path string to have the size that you want?

When I use

new go.Binding("geometryString", "sourceKey", sk => go.Geometry.fillPath(Tools.Shapes[sk]))

h1 disappearing

Result:

Untitled

  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv");

    myDiagram.nodeTemplate =
      $(go.Node, "Vertical",
        $(go.Panel, "Auto",
          $(go.Shape, "RoundedRectangle",
            { fill: "transparent", portId: "", stroke: "cornflowerblue", strokeWidth: 2 },
            new go.Binding("fill", "color")),
          $(go.Panel,
            new go.Binding("itemArray", "geos"),
            {
              itemTemplate:
                $(go.Panel,
                  $(go.Shape,
                    new go.Binding("geometry", "",
                      s => go.Geometry.parse(s, true).offset(-14.8, -16.3)))
                )
            })),
        $(go.TextBlock, { margin: 2 },
          new go.Binding("text"))
      );

    myDiagram.model = new go.GraphLinksModel(
    [
      { text: "Alpha", color: "lightblue",
        geos: [
"M14.81,39.01V16.335c0-0.779,0.632-1.411,1.411-1.411h0c0.779,0,1.411,0.632,1.411,1.411v9.23h9.757v-9.23\
c0-0.779,0.632-1.411,1.411-1.411h0c0.779,0,1.411,0.632,1.411,1.411V39.01c0,0.779-0.632,1.411-1.411,1.411h0\
c-0.779,0-1.411-0.632-1.411-1.411V28.114h-9.757V39.01c0,0.779-0.632,1.411-1.411,1.411h0\
C15.441,40.421,14.81,39.789,14.81,39.01z",
"M36.542,21.858c-0.623,0-1.129-0.505-1.129-1.129v0c0-0.593,0.464-1.083,1.056-1.123\
c2.684-0.178,4.295-0.939,4.853-3.716c0.112-0.557,0.595-0.967,1.163-0.967l0,0c0.657,0,1.19,0.533,1.19,1.19V39.01\
c0,0.779-0.632,1.411-1.411,1.411l0,0c-0.779,0-1.411-0.632-1.411-1.411V21.858H36.542z"
        ]
      }
    ]);
  }

produces:
image

Note the hard-coded offset of the Geometry, which appears to be how much margin all of the geometries were given.