svg 图片文件在 Palette 中呈现成功,但在 Angular 和 GoJS 的 Diagram 中则不然



.svg文件在调色板div中成功渲染,但在图形div中未呈现! 但是,.png文件在两个div 中都正确呈现! 有人可以帮助我吗?

这是我的节点Temaplate:


nodeTemplate = $(go.Node, 'Auto',
{
resizable: false, resizeObjectName: 'SHAPE',
// because the gridSnapCellSpot is Center, offset the Node's location
locationSpot: new go.Spot(0, 0, CellSize.width / 2, CellSize.height / 2),
// provide a visual warning about dropping anything onto an "item"
mouseDragEnter: (e, node: any) => {
e.handled = true;
node.findObject('SHAPE').fill = 'red';
e.diagram.currentCursor = 'not-allowed';
highlightGroup(node.containingGroup, false);
},
mouseDragLeave: (e, node: any) => {
node.updateTargetBindings();
},
mouseDrop: (e, node) => {  // disallow dropping anything onto an "item"
node.diagram.currentTool.doCancel();
}
},
// always save/load the point that is the top-left corner of the node, not the location
new go.Binding('position', 'pos', go.Point.parse).makeTwoWay(go.Point.stringify),
// this is the primary thing people see
$(go.Shape, 'Rectangle', { name: 'SHAPE', fill: 'white', minSize: CellSize, desiredSize: CellSize }),
// with the textual key in the middle
$(go.Panel, 'Auto',
{ isClipping: true },  // cause the Shape's geometry to clip other element(s)
{ width: CellSize.width, height: CellSize.height },  // bigger than the actual image, to demo stretch
$(go.Picture,
{
desiredSize: CellSize,
stretch: go.GraphObject.Fill,  // stretch picture to fill whole area of shape
imageStretch: go.GraphObject.UniformToFill  // but don't distort the image within the picture
// alas there is no imageAlign property to control where the image is drawn within the picture
},
new go.Binding('source', 'source'))
)
);

这是我的节点数据数组:

palletPaletteData: Array<go.ObjectData> = [
{ key: 'c', type: 'example', source: '/assets/images/android.svg' },
{ key: 'b', type: 'example', source: '/assets/images/manual.png' }
];

确保 SVG 的宽度和高度与viewBox宽度高度相匹配。 使"图片.宽度"和"图片.高度"与相同的宽度和高度值匹配。

请参阅 https://gojs.net/latest/intro/pictures.html#UsingSVGAsPictureSource

最新更新