<!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:
I think there is some margin/whitespace embedded in the image surrounding the “fan”.