JointJS - 如何更改删除 link 图标的颜色

Question

在 JointJS 中，移除 link 出现的 SVG 是一个带有白色 X 的红色圆圈。我想更改所有删除 link 图标的红色圆圈的颜色。有人知道怎么做吗？

谢谢！

尝试阅读以下内容，但找不到我想要的内容： https://resources.jointjs.com/demos/kitchensink

我想做这样的事情：

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

我想要红色的 'remove link' 圆圈变成 blue/purple 一个

Answer 1

您可以实现自己的删除按钮

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();
                        }
                    })
                ]
            }));
        }
  })