JointJS - 如何更改删除链接图标的颜色答案

【问题标题】：JointJS - How to change colour of remove link iconJointJS - 如何更改删除链接图标的颜色
【发布时间】：2020-03-02 03:04:27
【问题描述】：

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

谢谢！

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

我想做这样的事情：

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

我希望红色的“删除链接”圆圈变为蓝色/紫色的

【问题讨论】：

标签： jointjs

【解决方案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();
                        }
                    })
                ]
            }));
        }
  })

【讨论】：

谢谢！我会试一试:)