Modification Emplacement du port dans l'élément personnalisé dans JointJS

Question

j'ai pu créer un élément personnalisé en utilisant des réponses de cette question: Using predefined SVG file for creating a custom JointJS shape with ports

Après avoir examiné les tutoriels pour JointJS Je ne vois pas comment déplacer les ports à différents endroits sur l'élément.

Merci

code Exemple: 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 appliqué sur sélecteur approprié peut faire l'exemple trick.

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

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