JointJS：如何为out组内的端口设置不同自定义样式（如颜色）

我来帮你搞定这个问题！你不需要修改整个out端口组的默认配置，只需要给每个出端口单独指定自定义的attrs属性，就能覆盖组里的样式，实现不同颜色的端口。

具体实现思路 #

JointJS允许在定义outPorts（或inPorts）时，不用单纯的字符串数组，而是使用对象数组，每个对象里指定端口的id和专属的attrs，这样就能精准修改单个端口的样式，不会影响同组的其他端口。

修改后的完整代码 #

joint.shapes.devs.Model.define('presence.BasicStepModel', 
    { 
        size: { width: stepW, height: stepW }, 
        ports: { 
            groups: { 
                'in': { 
                    attrs: { 
                        circle: { opacity: 1 }, 
                        '.port-body': { fill: '#20A0C0', magnet: 'passive', r: 6 }, 
                        '.port-label': { opacity: 0 } 
                    } 
                }, 
                'out': { 
                    attrs: { 
                        circle: { opacity: 1 }, 
                        '.port-body': { fill: '#60E040', r: 6 }, // 保留默认绿色作为 fallback
                        '.port-label': { opacity: 0 } 
                    } 
                } 
            } 
        }, 
        // 关键修改：将outPorts从字符串数组改为对象数组，为每个端口单独设置样式
        inPorts: ['inPort'], 
        outPorts: [
            {
                id: 'outPort1',
                attrs: {
                    '.port-body': { fill: '#60E040' } // 绿色端口
                }
            },
            {
                id: 'outPort2',
                attrs: {
                    '.port-body': { fill: '#E04040' } // 红色端口
                }
            }
        ] 
    }, 
    { 
        attrs: { 
            '.label': { x: .5, 'font-family': "sans-serif", 'font-size': "12px", length: '12em' },
            '.bottom': { text: '', 'ref-y': 70 }, 
            '.topp': { 'ref-y': -20, opacity: 0 }, 
            '.rightt': { 'ref-y': 25, x: '50px', 'text-anchor': 'left', opacity: 1 }, 
            '.body': { fill: '#DEDFEF', rx: 5, ry: 5, }, 
            '.stepImage': { 'xlink:href': "./images/addCallData.png", width: imageW, height: imageW, x: 5, y: 5 } 
        } 
    }, 
    { }, 
    { } 
);

关键修改点说明 #

• outPorts结构调整：从单纯的字符串数组改成包含对象的数组，每个对象必须声明id（对应原端口名称），再通过attrs指定该端口的专属样式。
• 样式继承与覆盖：每个端口的attrs只需填写要修改的属性（比如fill颜色），其他样式（如r:6、magnet）会自动继承out组的默认配置，无需重复编写。

这样设置后，outPort1会显示绿色，outPort2会显示红色，完全符合你的需求，同时不会影响入端口的原有样式~

内容的提问来源于stack exchange，提问作者David Pinedo