angular - 一个 svg 图片文件在 Palette 中渲染成功，但在 Angular 和 GoJS 中却没有

问题描述

.svg 文件在调色板 div 中成功渲染，但在 Diagram div 中未渲染！但是 .png 文件在两个 div 中都正确呈现！任何人都可以帮助我吗？

这是我的节点模板：



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'))
    )
);

这是我的nodeDataArray：

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

标签： angularsvggojs

angular - 一个 svg 图片文件在 Palette 中渲染成功，但在 Angular 和 GoJS 中却没有

问题描述

解决方案

推荐阅读