Shape covered by invisible rectangle in circle

GoJS
1

Hi, I am trying to put a crescent on top of a circle. However, the crescent kept getting blocked by a rectangle in the circle. How do I move the crescent forward?

Code:

var svgCrescent = go.Geometry.parse("M150 100A64 64 0 1 0 150 220 54 54 0 1 1 150 100", true);

GoJs(go.Node, 'Auto',
    GoJs(go.Shape, 'Circle',
        { portId: '', strokeWidth: 2, stroke: '#373f47', fill: '#AACCFF', width: 128, height: 128, name: 'concept-body' },
        new go.Binding('fill', 'isSelected', function(sel) {
            return sel ? '#1e7aff' : '#AACCFF';
        }).ofObject(),
        new go.Binding('stroke', 'isSelected', function(sel) {
            return sel ? '#1e7aff' : '#373f47';
        }).ofObject(),
        new go.Binding('shadowVisible', 'isSelected', function(sel) {
            return sel;
        }).ofObject()),
    GoJs(go.Shape, {
        geometry: svgCrescent,
        fill: "red"
    })
);

The same thing happens when I use Picture of the SVG instead of Shape.

Any help is appreciated. Thanks!

2

“Auto” Panels automatically try to fit the contents inside an area of the main element. In this case the “Circle” Shape causes the contents to fit in the square area in the middle. Because you set the desiredSize of that main Shape, it couldn’t grow to accommodate your crescent Shape.

Try using a “Spot” Panel or a “Table” Panel instead of an “Auto” Panel. Or don’t set the width and height of the “Circle” Shape. And maybe set:

spot1: go.Spot.TopLeft,
spot2: go.Spot.BottomRight

on the “Circle” Shape. It depends on what result you want.

3

Spot panel worked. Thanks!