Ändern Anschlussposition in benutzerdefinierten Element in JointJS

Question

konnte ich ein benutzerdefiniertes Element verwendet Antworten von dieser Frage schaffen: Ich sehe nicht, Using predefined SVG file for creating a custom JointJS shape with ports

Nach Überprüfung der Tutorials für JointJS wie an verschiedenen Orten um die Ports zu bewegen auf dem Element.

Dank

Beispielcode: http://jsfiddle.net/jshubert/9a8brrun/

var el1 = new joint.shapes.devs.Model({ 
    markup: '<g class="rotatable"><g class="scalable"><image class="body"/></g><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>', 
    size: { 
    width: 100, 
    height: 100 
    }, 
    position: { 
    x: 50, 
    y: 75 
    }, 
    attrs: { 
    '.label': { text: 'SW_1', 'ref-x': .1, 'ref-y': .01}, 
    '.body': { 
     width: 1024, 
     height: 768, 
     'xlink:href': 'data:image/svg+xml;utf8,' + encodeURIComponent(svgFile), 
     preserveAspectRatio: 'none' 
    } 
    }, 
    inPorts: ['1'], 
    outPorts: ['2'] 
}); 

Answer 1

ref-x, ref-y auf entsprechenden Selektor angewandt kann den Trick zB tun.

'.inPorts .port0 .port-body' : {'ref-x': -20, 'ref-y': -20}

http://jsfiddle.net/9a8brrun/1/