JointJS - How to change colour of remove link icon

Question

In JointJS the remove link SVG that appears is a red circle with a white X in it. I would like to change the colour of the red circle for all remove link icons. Anyone know how to do this?

Thanks!

Tried reading the following but couldn't find what I wanted: https://resources.jointjs.com/demos/kitchensink

I want to do something like this:

defaultLink: new joint.shapes.app.Link({
    attrs: {
        remove: {
            circle: {
                fill: '#634ee9'
            }
        }
    }
}),

I want the red 'remove link' circle to change to a blue/purple one

Answer 1

You can implement your own remove button

this.paper.on({
        'link:mouseenter': function (linkView) {
            linkView.addTools(new joint.dia.ToolsView({
                tools: [
                    new joint.linkTools.Vertices({ snapRadius: 0 }),
                    new joint.linkTools.Remove({
                        distance: 20
                    }),
                    new joint.linkTools.Button({
                        markup: [{
                            tagName: 'circle',
                            selector: 'button',
                            attributes: {
                                'r': 15,
                                'stroke': '#fe854f',
                                'stroke-width': 1,
                                'fill': 'white',
                                'cursor': 'pointer'
                            }
                        }, {
                            tagName: 'text',
                            textContent: 'X',
                            selector: 'icon',
                            attributes: {
                                'fill': '#fe854f',
                                'font-size': 8,
                                'text-anchor': 'middle',
                                'font-weight': 'bold',
                                'pointer-events': 'none',
                                'y': '0.3em'
                            }
                        }],
                        distance: -50,
                        action: function () {
                            var link = this.model;
                            link.remove();
                        }
                    })
                ]
            }));
        }
  })