go.Picture binding properties

GoJS
1

I am unable to bind with width and height on go.Picture(). I have tried to set the size through the following properties: height, width, desiredSize, and with the imageStretch: go.GraphObject.Fill. Neither of these options work. If I set the height and width through either desiredSize, or height/width on the object itself, the go.Picture will resize. It is also worth noting that the source from the SVG does work in the data bind, but the other properties: width, height. and location do not bind. Any help with this is greatly appreciated. Example:

$(go.Picture,
{
height:200,
width: 500
},
new go.Binding(“source”, “ImageString”, (str) => data:image/svg+xml;base64,${str}))

If I try to bind the size properties the picture will not resize. Example 2.

$(go.Picture,
{
// desiredSize: new go.Size(500,200),
height:200,
width: 500
},
new go.Binding(“source”, “ImageString”, (str) => data:image/svg+xml;base64,${str})),
new go.Binding(“height”, “Height”, (num:number) => num ),
new go.Binding(“width”, “Width”, (num:number)=> num),
// new go.Binding(“position”, “loc”, (Location) => new go.Point(Location.Item1, Location.Item2))
)

2

I cannot tell what you mean by “picture will resize” and what it is that you want.

If you set or bind the desiredSize (or width and height) to real numbers, the GraphObject will be that size. (Although it could be clipped by its panel, and of course it can be scaled or rotated.) So the Binding of “height” to data.Height should work as long as data.Height is a real number.

The default value of Picture.imageStretch is go.GraphObject.Fill, so setting it to that won’t change anything.

Setting or binding the position of the Picture will only have an effect if the Picture is in a “Position” Panel.

3

It sounds like the problem might be with what you are describing setting the “Position” in a panel.

When I say “picture will resize” I mean the SVG itself resizes. I am uploading 3 different photos for more clarity on my issue.
In Figure1-normalSize - I have the SVG displaying normally straight from the source. The width and height in the SVG string has a width and height set to “100” and that is what is being displayed

In Figure2-svgResized - I added the width and height to the go.Picture. You’ll see in the second photo that the SVG stretches correctly and is displaying as intended with a width of 500 and height of 200. You’ll also see that the panel has been updated. It is the blue outline around the SVG

$(go.Picture,
              {
                // desiredSize: new go.Size(500,200),
                height:200,
                width: 500
              },
              new go.Binding("source", "ImageString", (str) => `data:image/svg+xml;base64,${str}`)

In Figure3-svgResizeFail - I add the Binding of height and and width. You’ll see the panel (blue outline) has increased it’s size to the proper height and width but the SVG picture itself remains the same size. I also tried to add the binding for the position, but that value is also ignored. I’ve added the full nodeTemplate code below for reference. Please let me know if this makes more sense. Thank you for your help.

$(go.Picture,
              {
                // desiredSize: new go.Size(500,200),
                height:200,
                width: 500
              },
              new go.Binding("source", "ImageString", (str) => `data:image/svg+xml;base64,${str}`)),
              new go.Binding("height", "Height", (num:number) =>  num ),
              new go.Binding("width", "Width", (num:number)=> num),
              // new go.Binding("position", "loc", (Location) => new go.Point(Location.Item1, Location.Item2))
            )

Figure1-normalSize
Figure1-normalSize1464×702 6.99 KB

Figure2-svgResized
Figure2-svgResized1298×625 15.6 KB

Figure3-svgResizeFail
Figure3-svgResizeFail1377×750 17 KB

Full Code

    dia.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Panel,
          {
            // height:200,
            // width: 500
          },        
            $(go.Picture,
              {
                // desiredSize: new go.Size(500,200),
                height:200,
                width: 500
              },
              new go.Binding("source", "ImageString", (str) => `data:image/svg+xml;base64,${str}`)),
              new go.Binding("height", "Height", (num:number) =>  num ),
              new go.Binding("width", "Width", (num:number)=> num),
              // new go.Binding("position", "loc", (Location) => new go.Point(Location.Item1, Location.Item2))
            )
      )
4

The problem is not apparent in the template.
Could you please show the model data for that node?

5

Yes, here is the entire initDiagram including the model data

  initDiagram = (): go.Diagram => {
    const $ = go.GraphObject.make;

    const dia = $(go.Diagram, {
      model: new go.GraphLinksModel({
        nodeKeyProperty: 'id',
        linkKeyProperty: 'Key',
      }),
    });

    // const panel = $(go.Panel);
    
    dia.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Panel,
          {
            // height:200,
            // width: 500
          },        
            $(go.Picture,
              
              new go.Binding("source", "ImageString", (str) => `data:image/svg+xml;base64,${str}`)),
              new go.Binding("height", "Height", (num:number) =>  num ),
              new go.Binding("width", "Width", (num:number)=> num),
              // new go.Binding("position", "loc", (Location) => new go.Point(Location.Item1, Location.Item2))
            )
      )
      

    dia.model = new go.GraphLinksModel();
    return dia;

  }
6

I do not see any data in what you just quoted.

7

Sorry I understood that you wanted the diagram.model.

Data

"NodeModels": [
{
  "Height": 558.0,
  "Width": 714.0,
  "ImageString": Buffer.from(SvgTestingConstants.SVG_FANCOOLING, 'utf-8').toString('base64'),
  "Location": {
    "Item1": -184.81578947368439,
    "Item2": -209.02631578947381
  },
}

SVG

export const SVG_FANCOOLING = '<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --> <svg version="1.1" id="FanCooling" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="714" width="558" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"> <style type="text/css"> .st0{fill:url(#SVGID_1_);} .st1{fill:url(#SVGID_2_);stroke:#666666;stroke-miterlimit:10;} .st2{fill:url(#SVGID_3_);} .st3{fill:url(#SVGID_4_);} .st4{fill:url(#SVGID_5_);} .st5{fill:url(#SVGID_6_);} .st6{fill:url(#SVGID_7_);} .st7{fill:url(#SVGID_8_);} .st8{display:none;opacity:0.5;fill:none;} .st9{fill:#666666;stroke:#666666;stroke-miterlimit:10;} .st10{fill:none;stroke:#666666;stroke-miterlimit:10;} </style> <g id="Gradients_3_"> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="14.87" y1="50" x2="85.13" y2="50"> <stop offset="0" style="stop-color:#808080"/> <stop offset="0.4" style="stop-color:#CCCCCC"/> <stop offset="0.5" style="stop-color:#F2F2F2"/> <stop offset="0.6" style="stop-color:#CCCCCC"/> <stop offset="1" style="stop-color:#808080"/> </linearGradient> <path class="st0" d="M80.13,85.13H19.87c-2.76,0-5-2.24-5-5V19.87c0-2.76,2.24-5,5-5h60.26c2.76,0,5,2.24,5,5v60.26 C85.13,82.89,82.89,85.13,80.13,85.13z"/> <radialGradient id="SVGID_2_" cx="50" cy="50" r="31.4342" gradientUnits="userSpaceOnUse"> <stop offset="0" style="stop-color:#F2F2F2"/> <stop offset="0.5" style="stop-color:#CCCCCC"/> <stop offset="0.85" style="stop-color:#808080"/> <stop offset="1" style="stop-color:#666666"/> </radialGradient> <circle class="st1" cx="50" cy="50" r="31.43"/> <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="55.3835" y1="31.3321" x2="66.6549" y2="37.8396"> <stop offset="0" style="stop-color:#808080"/> <stop offset="0.4" style="stop-color:#CCCCCC"/> <stop offset="0.5" style="stop-color:#F2F2F2"/> <stop offset="0.6" style="stop-color:#CCCCCC"/> <stop offset="1" style="stop-color:#808080"/> </linearGradient> <path class="st2" d="M61.5,20.74L49.34,41.81c1.61-0.13,3.27,0.2,4.78,1.07c1.72,0.99,2.94,2.51,3.59,4.23 c11.99-6.88,13.02-21.25,9.99-23.09C64.44,22.04,61.5,20.74,61.5,20.74z"/> <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="36.5248" y1="36.0038" x2="47.7963" y2="29.4963"> <stop offset="0" style="stop-color:#808080"/> <stop offset="0.4" style="stop-color:#CCCCCC"/> <stop offset="0.5" style="stop-color:#F2F2F2"/> <stop offset="0.6" style="stop-color:#CCCCCC"/> <stop offset="1" style="stop-color:#808080"/> </linearGradient> <path class="st3" d="M30.41,25.41l12.16,21.07c0.69-1.46,1.81-2.73,3.32-3.6c1.72-0.99,3.64-1.29,5.45-0.99 c0.04-13.82-11.9-21.9-15-20.2C33.01,23.51,30.41,25.41,30.41,25.41z"/> <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="31.1414" y1="54.6717" x2="31.1414" y2="41.6566"> <stop offset="0" style="stop-color:#808080"/> <stop offset="0.4" style="stop-color:#CCCCCC"/> <stop offset="0.5" style="stop-color:#F2F2F2"/> <stop offset="0.6" style="stop-color:#CCCCCC"/> <stop offset="1" style="stop-color:#808080"/> </linearGradient> <path class="st4" d="M18.91,54.67h24.32c-0.92-1.33-1.46-2.94-1.46-4.67c0-1.98,0.7-3.8,1.87-5.22 c-11.95-6.95-24.91-0.65-24.99,2.89C18.57,51.47,18.91,54.67,18.91,54.67z"/> <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="33.3451" y1="62.1604" x2="44.6165" y2="68.6679"> <stop offset="0" style="stop-color:#808080"/> <stop offset="0.4" style="stop-color:#CCCCCC"/> <stop offset="0.5" style="stop-color:#F2F2F2"/> <stop offset="0.6" style="stop-color:#CCCCCC"/> <stop offset="1" style="stop-color:#808080"/> </linearGradient> <path class="st5" d="M38.5,79.26l12.16-21.07c-1.61,0.13-3.27-0.2-4.78-1.07c-1.72-0.99-2.94-2.51-3.59-4.23 c-11.99,6.88-13.02,21.25-9.99,23.09C35.56,77.96,38.5,79.26,38.5,79.26z"/> <linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="52.2037" y1="70.5038" x2="63.4752" y2="63.9962"> <stop offset="0" style="stop-color:#808080"/> <stop offset="0.4" style="stop-color:#CCCCCC"/> <stop offset="0.5" style="stop-color:#F2F2F2"/> <stop offset="0.6" style="stop-color:#CCCCCC"/> <stop offset="1" style="stop-color:#808080"/> </linearGradient> <path class="st6" d="M69.59,74.59L57.43,53.52c-0.69,1.46-1.81,2.73-3.32,3.6c-1.72,0.99-3.64,1.29-5.45,0.99 c-0.04,13.82,11.9,21.9,15,20.2C66.99,76.49,69.59,74.59,69.59,74.59z"/> <linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="68.8586" y1="58.3434" x2="68.8586" y2="45.3283"> <stop offset="0" style="stop-color:#808080"/> <stop offset="0.4" style="stop-color:#CCCCCC"/> <stop offset="0.5" style="stop-color:#F2F2F2"/> <stop offset="0.6" style="stop-color:#CCCCCC"/> <stop offset="1" style="stop-color:#808080"/> </linearGradient> <path class="st7" d="M81.09,45.33H56.76c0.92,1.33,1.46,2.94,1.46,4.67c0,1.98-0.7,3.8-1.87,5.22c11.95,6.95,24.91,0.65,24.99-2.89 C81.43,48.53,81.09,45.33,81.09,45.33z"/> </g> <path id="Color_Fill_3_" class="st8" d="M80.13,85.13H19.87c-2.76,0-5-2.24-5-5V19.87c0-2.76,2.24-5,5-5h60.26c2.76,0,5,2.24,5,5 v60.26C85.13,82.89,82.89,85.13,80.13,85.13z"/> <g id="Solid_Accents_3_"> <circle class="st9" cx="50" cy="50" r="5.82"/> </g> <g id="Outlines_3_"> <path class="st10" d="M61.5,20.74L49.34,41.81c1.61-0.13,3.27,0.2,4.78,1.07c1.72,0.99,2.94,2.51,3.59,4.23 c11.99-6.88,13.02-21.25,9.99-23.09C64.44,22.04,61.5,20.74,61.5,20.74z"/> <path class="st10" d="M30.41,25.41l12.16,21.07c0.69-1.46,1.81-2.73,3.32-3.6c1.72-0.99,3.64-1.29,5.45-0.99 c0.04-13.82-11.9-21.9-15-20.2C33.01,23.51,30.41,25.41,30.41,25.41z"/> <path class="st10" d="M18.91,54.67h24.32c-0.92-1.33-1.46-2.94-1.46-4.67c0-1.98,0.7-3.8,1.87-5.22 c-11.95-6.95-24.91-0.65-24.99,2.89C18.57,51.47,18.91,54.67,18.91,54.67z"/> <path class="st10" d="M38.5,79.26l12.16-21.07c-1.61,0.13-3.27-0.2-4.78-1.07c-1.72-0.99-2.94-2.51-3.59-4.23 c-11.99,6.88-13.02,21.25-9.99,23.09C35.56,77.96,38.5,79.26,38.5,79.26z"/> <path class="st10" d="M69.59,74.59L57.43,53.52c-0.69,1.46-1.81,2.73-3.32,3.6c-1.72,0.99-3.64,1.29-5.45,0.99 c-0.04,13.82,11.9,21.9,15,20.2C66.99,76.49,69.59,74.59,69.59,74.59z"/> <path class="st10" d="M81.09,45.33H56.76c0.92,1.33,1.46,2.94,1.46,4.67c0,1.98-0.7,3.8-1.87,5.22 c11.95,6.95,24.91,0.65,24.99-2.89C81.43,48.53,81.09,45.33,81.09,45.33z"/> <circle class="st10" cx="50" cy="50" r="31.43"/> <circle class="st10" cx="50" cy="50" r="8.22"/> <path class="st10" d="M80.13,85.13H19.87c-2.76,0-5-2.24-5-5V19.87c0-2.76,2.24-5,5-5h60.26c2.76,0,5,2.24,5,5v60.26 C85.13,82.89,82.89,85.13,80.13,85.13z"/> </g> </svg>';
8 
<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  new go.Diagram("myDiagramDiv");

myDiagram.nodeTemplate =
  $(go.Node,
    new go.Binding("position", "Location", loc => new go.Point(loc.Item1, loc.Item2)),
    $(go.Picture,
      { imageStretch: go.GraphObject.UniformToFill },
      new go.Binding("source", "ImageString", str => `data:image/svg+xml;base64,${str}`),
      new go.Binding("height", "Height"),
      new go.Binding("width", "Width"),
    )
  );

const SvgTestingConstants =
  {
    SVG_FANCOOLING: '<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --> <svg version="1.1" id="FanCooling" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="714" width="558" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"> <style type="text/css"> .st0{fill:url(#SVGID_1_);} .st1{fill:url(#SVGID_2_);stroke:#666666;stroke-miterlimit:10;} .st2{fill:url(#SVGID_3_);} .st3{fill:url(#SVGID_4_);} .st4{fill:url(#SVGID_5_);} .st5{fill:url(#SVGID_6_);} .st6{fill:url(#SVGID_7_);} .st7{fill:url(#SVGID_8_);} .st8{display:none;opacity:0.5;fill:none;} .st9{fill:#666666;stroke:#666666;stroke-miterlimit:10;} .st10{fill:none;stroke:#666666;stroke-miterlimit:10;} </style> <g id="Gradients_3_"> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="14.87" y1="50" x2="85.13" y2="50"> <stop offset="0" style="stop-color:#808080"/> <stop offset="0.4" style="stop-color:#CCCCCC"/> <stop offset="0.5" style="stop-color:#F2F2F2"/> <stop offset="0.6" style="stop-color:#CCCCCC"/> <stop offset="1" style="stop-color:#808080"/> </linearGradient> <path class="st0" d="M80.13,85.13H19.87c-2.76,0-5-2.24-5-5V19.87c0-2.76,2.24-5,5-5h60.26c2.76,0,5,2.24,5,5v60.26 C85.13,82.89,82.89,85.13,80.13,85.13z"/> <radialGradient id="SVGID_2_" cx="50" cy="50" r="31.4342" gradientUnits="userSpaceOnUse"> <stop offset="0" style="stop-color:#F2F2F2"/> <stop offset="0.5" style="stop-color:#CCCCCC"/> <stop offset="0.85" style="stop-color:#808080"/> <stop offset="1" style="stop-color:#666666"/> </radialGradient> <circle class="st1" cx="50" cy="50" r="31.43"/> <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="55.3835" y1="31.3321" x2="66.6549" y2="37.8396"> <stop offset="0" style="stop-color:#808080"/> <stop offset="0.4" style="stop-color:#CCCCCC"/> <stop offset="0.5" style="stop-color:#F2F2F2"/> <stop offset="0.6" style="stop-color:#CCCCCC"/> <stop offset="1" style="stop-color:#808080"/> </linearGradient> <path class="st2" d="M61.5,20.74L49.34,41.81c1.61-0.13,3.27,0.2,4.78,1.07c1.72,0.99,2.94,2.51,3.59,4.23 c11.99-6.88,13.02-21.25,9.99-23.09C64.44,22.04,61.5,20.74,61.5,20.74z"/> <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="36.5248" y1="36.0038" x2="47.7963" y2="29.4963"> <stop offset="0" style="stop-color:#808080"/> <stop offset="0.4" style="stop-color:#CCCCCC"/> <stop offset="0.5" style="stop-color:#F2F2F2"/> <stop offset="0.6" style="stop-color:#CCCCCC"/> <stop offset="1" style="stop-color:#808080"/> </linearGradient> <path class="st3" d="M30.41,25.41l12.16,21.07c0.69-1.46,1.81-2.73,3.32-3.6c1.72-0.99,3.64-1.29,5.45-0.99 c0.04-13.82-11.9-21.9-15-20.2C33.01,23.51,30.41,25.41,30.41,25.41z"/> <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="31.1414" y1="54.6717" x2="31.1414" y2="41.6566"> <stop offset="0" style="stop-color:#808080"/> <stop offset="0.4" style="stop-color:#CCCCCC"/> <stop offset="0.5" style="stop-color:#F2F2F2"/> <stop offset="0.6" style="stop-color:#CCCCCC"/> <stop offset="1" style="stop-color:#808080"/> </linearGradient> <path class="st4" d="M18.91,54.67h24.32c-0.92-1.33-1.46-2.94-1.46-4.67c0-1.98,0.7-3.8,1.87-5.22 c-11.95-6.95-24.91-0.65-24.99,2.89C18.57,51.47,18.91,54.67,18.91,54.67z"/> <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="33.3451" y1="62.1604" x2="44.6165" y2="68.6679"> <stop offset="0" style="stop-color:#808080"/> <stop offset="0.4" style="stop-color:#CCCCCC"/> <stop offset="0.5" style="stop-color:#F2F2F2"/> <stop offset="0.6" style="stop-color:#CCCCCC"/> <stop offset="1" style="stop-color:#808080"/> </linearGradient> <path class="st5" d="M38.5,79.26l12.16-21.07c-1.61,0.13-3.27-0.2-4.78-1.07c-1.72-0.99-2.94-2.51-3.59-4.23 c-11.99,6.88-13.02,21.25-9.99,23.09C35.56,77.96,38.5,79.26,38.5,79.26z"/> <linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="52.2037" y1="70.5038" x2="63.4752" y2="63.9962"> <stop offset="0" style="stop-color:#808080"/> <stop offset="0.4" style="stop-color:#CCCCCC"/> <stop offset="0.5" style="stop-color:#F2F2F2"/> <stop offset="0.6" style="stop-color:#CCCCCC"/> <stop offset="1" style="stop-color:#808080"/> </linearGradient> <path class="st6" d="M69.59,74.59L57.43,53.52c-0.69,1.46-1.81,2.73-3.32,3.6c-1.72,0.99-3.64,1.29-5.45,0.99 c-0.04,13.82,11.9,21.9,15,20.2C66.99,76.49,69.59,74.59,69.59,74.59z"/> <linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="68.8586" y1="58.3434" x2="68.8586" y2="45.3283"> <stop offset="0" style="stop-color:#808080"/> <stop offset="0.4" style="stop-color:#CCCCCC"/> <stop offset="0.5" style="stop-color:#F2F2F2"/> <stop offset="0.6" style="stop-color:#CCCCCC"/> <stop offset="1" style="stop-color:#808080"/> </linearGradient> <path class="st7" d="M81.09,45.33H56.76c0.92,1.33,1.46,2.94,1.46,4.67c0,1.98-0.7,3.8-1.87,5.22c11.95,6.95,24.91,0.65,24.99-2.89 C81.43,48.53,81.09,45.33,81.09,45.33z"/> </g> <path id="Color_Fill_3_" class="st8" d="M80.13,85.13H19.87c-2.76,0-5-2.24-5-5V19.87c0-2.76,2.24-5,5-5h60.26c2.76,0,5,2.24,5,5 v60.26C85.13,82.89,82.89,85.13,80.13,85.13z"/> <g id="Solid_Accents_3_"> <circle class="st9" cx="50" cy="50" r="5.82"/> </g> <g id="Outlines_3_"> <path class="st10" d="M61.5,20.74L49.34,41.81c1.61-0.13,3.27,0.2,4.78,1.07c1.72,0.99,2.94,2.51,3.59,4.23 c11.99-6.88,13.02-21.25,9.99-23.09C64.44,22.04,61.5,20.74,61.5,20.74z"/> <path class="st10" d="M30.41,25.41l12.16,21.07c0.69-1.46,1.81-2.73,3.32-3.6c1.72-0.99,3.64-1.29,5.45-0.99 c0.04-13.82-11.9-21.9-15-20.2C33.01,23.51,30.41,25.41,30.41,25.41z"/> <path class="st10" d="M18.91,54.67h24.32c-0.92-1.33-1.46-2.94-1.46-4.67c0-1.98,0.7-3.8,1.87-5.22 c-11.95-6.95-24.91-0.65-24.99,2.89C18.57,51.47,18.91,54.67,18.91,54.67z"/> <path class="st10" d="M38.5,79.26l12.16-21.07c-1.61,0.13-3.27-0.2-4.78-1.07c-1.72-0.99-2.94-2.51-3.59-4.23 c-11.99,6.88-13.02,21.25-9.99,23.09C35.56,77.96,38.5,79.26,38.5,79.26z"/> <path class="st10" d="M69.59,74.59L57.43,53.52c-0.69,1.46-1.81,2.73-3.32,3.6c-1.72,0.99-3.64,1.29-5.45,0.99 c-0.04,13.82,11.9,21.9,15,20.2C66.99,76.49,69.59,74.59,69.59,74.59z"/> <path class="st10" d="M81.09,45.33H56.76c0.92,1.33,1.46,2.94,1.46,4.67c0,1.98-0.7,3.8-1.87,5.22 c11.95,6.95,24.91,0.65,24.99-2.89C81.43,48.53,81.09,45.33,81.09,45.33z"/> <circle class="st10" cx="50" cy="50" r="31.43"/> <circle class="st10" cx="50" cy="50" r="8.22"/> <path class="st10" d="M80.13,85.13H19.87c-2.76,0-5-2.24-5-5V19.87c0-2.76,2.24-5,5-5h60.26c2.76,0,5,2.24,5,5v60.26 C85.13,82.89,82.89,85.13,80.13,85.13z"/> </g> </svg>'
  };

myDiagram.model = new go.GraphLinksModel(
[
  {
    "Height": 558.0,
    "Width": 714.0,
    "ImageString": btoa(SvgTestingConstants.SVG_FANCOOLING),
    "Location": {
      "Item1": -184.81578947368439,
      "Item2": -209.02631578947381
    },
  }
]);
  </script>
</body>
</html>

produces, this, after selecting the node:

image
image862×666 34.8 KB

I think there is some margin/whitespace embedded in the image surrounding the “fan”.

9

Thanks! This solution worked.